英文:
How to customise label and select option items in Vue3 using vuetify
问题
我正在尝试自定义vue3中使用vuetify的v-autocomplete的标签和选择下拉框。我想让标签包含所选选项的国旗图标和拨号代码。目前只有初始选择的国家的国旗图标和拨号代码显示出来，当选择不同的国家时，标签为空。另外，有人知道如何按国家搜索，但只有拨号代码反映在输入中。
<v-row>
<v-col cols="4" md="3">
<v-autocomplete
variant="outlined"
class="rounded"
v-model="selectedCountry"
:items="countryOptions"
label="Country Code"
item-title="name"
item-value="dial_code"
>
<template v-slot:item="{ props, item }">
<v-list-item
v-bind="props"
>
<span>{{ item.raw.flag }} {{ item.raw.dial_code }}</span>
</v-list-item>
</template>
<template v-slot:label>
<span> {{ selectedCountry.flag }} {{selectedCountry.dial_code}} </span>
</template>
</v-autocomplete>
</v-col>
</v-row>
<script setup>
const countryOptions =
[
{
"name": "Afghanistan",
"flag": "🇦🇫",
"code": "AF",
"dial_code": "+93"
},
{
"name": "Åland Islands",
"flag": "🇦🇽",
"code": "AX",
"dial_code": "+358"
},
// 其他国家信息
]
const selectedCountry = countryOptions[0]
</script>
英文:
I am trying to customize the label and select dropdown of a v-autocomplete in vue3 using vuetify. I want the label to contain the flag icon and dial_code of the selected option. Currently only the initial selectedCountry flag icon and dial_code are showing and when one selects a different country the label is blank. Also anyone with guidance on how one can search by country but only the dial_code reflects on the input.
<v-row>
<v-col cols="4" md="3">
<v-autocomplete
variant="outlined"
class="rounded"
v-model="selectedCountry"
:items="countryOptions"
label="Country Code"
item-title="name"
item-value="dial_code"
>
<template v-slot:item="{ props, item }">
<v-list-item
v-bind="props"
>
<span>{{ item.raw.flag }} {{ item.raw.dial_code }}</span>
</v-list-item>
</template>
<template v-slot:label>
<span> {{ selectedCountry.flag }} {{selectedCountry.dial_code}} </span>
</template>
</v-autocomplete>
</v-col>
</v-row>
<script setup>
const countryOptions =
[
{
"name": "Afghanistan",
"flag": "🇦🇫",
"code": "AF",
"dial_code": "+93"
},
{
"name": "Åland Islands",
"flag": "🇦🇽",
"code": "AX",
"dial_code": "+358"
},
{
"name": "Albania",
"flag": "🇦🇱",
"code": "AL",
"dial_code": "+355"
},
{
"name": "Argentina",
"flag": "🇦🇷",
"code": "AR",
"dial_code": "+54"
},
{
"name": "Armenia",
"flag": "🇦🇲",
"code": "AM",
"dial_code": "+374"
},
{
"name": "Aruba",
"flag": "🇦🇼",
"code": "AW",
"dial_code": "+297"
},
{
"name": "Australia",
"flag": "🇦🇺",
"code": "AU",
"dial_code": "+61"
},
{
"name": "Austria",
"flag": "🇦🇹",
"code": "AT",
"dial_code": "+43"
},
{
"name": "Azerbaijan",
"flag": "🇦🇿",
"code": "AZ",
"dial_code": "+994"
},
{
"name": "Bahamas",
"flag": "🇧🇸",
"code": "BS",
"dial_code": "+1242"
},
{
"name": "Bahrain",
"flag": "🇧🇭",
"code": "BH",
"dial_code": "+973"
},
{
"name": "Bangladesh",
"flag": "🇧🇩",
"code": "BD",
"dial_code": "+880"
},
{
"name": "Barbados",
"flag": "🇧🇧",
"code": "BB",
"dial_code": "+1246"
},
{
"name": "Belarus",
"flag": "🇧🇾",
"code": "BY",
"dial_code": "+375"
},
{
"name": "Belgium",
"flag": "🇧🇪",
"code": "BE",
"dial_code": "+32"
},
{
"name": "Belize",
"flag": "🇧🇿",
"code": "BZ",
"dial_code": "+501"
}
]
const selectedCountry = countryOptions[0]
</script>
答案1
得分: 0
将 selectedCountry 改为响应式，通过将其放入一个 ref 中，这样模板可以对其变化做出反应：
const selectedCountry = ref(countryOptions[0])
另外，由于你在标签中使用了来自 selectedCountry 的对象数据，自动完成必须返回整个对象，而不仅仅是数字，你可以使用 :return-object 属性：
<v-autocomplete
...
return-object
>
英文:
Make selectedCountry reactive by putting it into a ref, so that the template can react to changes:
const selectedCountry = ref(countryOptions[0])
Also, since you use object data from selectedCountry in the label, the autocomplete has to return the whole object instead of only the number, which you get with the :return-object property:
<v-autocomplete
...
return-object
>
Here it is in a playground
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论