如何在Vue3中使用Vuetify自定义标签和选择选项项。

huangapple go评论64阅读模式
英文:

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.

&lt;v-row&gt;
	&lt;v-col cols=&quot;4&quot; md=&quot;3&quot;&gt;
		&lt;v-autocomplete
			variant=&quot;outlined&quot;
         	class=&quot;rounded&quot;
         	v-model=&quot;selectedCountry&quot;
         	:items=&quot;countryOptions&quot;
         	label=&quot;Country Code&quot;
         	item-title=&quot;name&quot;
         	item-value=&quot;dial_code&quot;
      &gt;
		&lt;template v-slot:item=&quot;{ props, item }&quot;&gt;
			&lt;v-list-item
				v-bind=&quot;props&quot;
			&gt;
				&lt;span&gt;{{ item.raw.flag }} {{ item.raw.dial_code }}&lt;/span&gt;
			&lt;/v-list-item&gt;
		&lt;/template&gt;
		&lt;template v-slot:label&gt;
			&lt;span&gt; {{ selectedCountry.flag }} {{selectedCountry.dial_code}} &lt;/span&gt;
		&lt;/template&gt;
       	&lt;/v-autocomplete&gt;
    &lt;/v-col&gt;
&lt;/v-row&gt;
&lt;script setup&gt;
const countryOptions =
  [
    {
      &quot;name&quot;: &quot;Afghanistan&quot;,
      &quot;flag&quot;: &quot;&#127462;&#127467;&quot;,
      &quot;code&quot;: &quot;AF&quot;,
      &quot;dial_code&quot;: &quot;+93&quot;
    },
    {
      &quot;name&quot;: &quot;&#197;land Islands&quot;,
      &quot;flag&quot;: &quot;&#127462;&#127485;&quot;,
      &quot;code&quot;: &quot;AX&quot;,
      &quot;dial_code&quot;: &quot;+358&quot;
    },
    {
      &quot;name&quot;: &quot;Albania&quot;,
      &quot;flag&quot;: &quot;&#127462;&#127473;&quot;,
      &quot;code&quot;: &quot;AL&quot;,
      &quot;dial_code&quot;: &quot;+355&quot;
    },
    {
    &quot;name&quot;: &quot;Argentina&quot;,
    &quot;flag&quot;: &quot;&#127462;&#127479;&quot;,
    &quot;code&quot;: &quot;AR&quot;,
    &quot;dial_code&quot;: &quot;+54&quot;
    },
    {
      &quot;name&quot;: &quot;Armenia&quot;,
      &quot;flag&quot;: &quot;&#127462;&#127474;&quot;,
      &quot;code&quot;: &quot;AM&quot;,
      &quot;dial_code&quot;: &quot;+374&quot;
    },
    {
      &quot;name&quot;: &quot;Aruba&quot;,
      &quot;flag&quot;: &quot;&#127462;&#127484;&quot;,
      &quot;code&quot;: &quot;AW&quot;,
      &quot;dial_code&quot;: &quot;+297&quot;
    },
    {
      &quot;name&quot;: &quot;Australia&quot;,
      &quot;flag&quot;: &quot;&#127462;&#127482;&quot;,
      &quot;code&quot;: &quot;AU&quot;,
      &quot;dial_code&quot;: &quot;+61&quot;
    },
    {
      &quot;name&quot;: &quot;Austria&quot;,
      &quot;flag&quot;: &quot;&#127462;&#127481;&quot;,
      &quot;code&quot;: &quot;AT&quot;,
      &quot;dial_code&quot;: &quot;+43&quot;
    },
    {
      &quot;name&quot;: &quot;Azerbaijan&quot;,
      &quot;flag&quot;: &quot;&#127462;&#127487;&quot;,
      &quot;code&quot;: &quot;AZ&quot;,
      &quot;dial_code&quot;: &quot;+994&quot;
    },
    {
      &quot;name&quot;: &quot;Bahamas&quot;,
      &quot;flag&quot;: &quot;&#127463;&#127480;&quot;,
      &quot;code&quot;: &quot;BS&quot;,
      &quot;dial_code&quot;: &quot;+1242&quot;
    },
    {
      &quot;name&quot;: &quot;Bahrain&quot;,
      &quot;flag&quot;: &quot;&#127463;&#127469;&quot;,
      &quot;code&quot;: &quot;BH&quot;,
      &quot;dial_code&quot;: &quot;+973&quot;
    },
    {
      &quot;name&quot;: &quot;Bangladesh&quot;,
      &quot;flag&quot;: &quot;&#127463;&#127465;&quot;,
      &quot;code&quot;: &quot;BD&quot;,
      &quot;dial_code&quot;: &quot;+880&quot;
    },
    {
      &quot;name&quot;: &quot;Barbados&quot;,
      &quot;flag&quot;: &quot;&#127463;&#127463;&quot;,
      &quot;code&quot;: &quot;BB&quot;,
      &quot;dial_code&quot;: &quot;+1246&quot;
    },
    {
      &quot;name&quot;: &quot;Belarus&quot;,
      &quot;flag&quot;: &quot;&#127463;&#127486;&quot;,
      &quot;code&quot;: &quot;BY&quot;,
      &quot;dial_code&quot;: &quot;+375&quot;
    },
    {
      &quot;name&quot;: &quot;Belgium&quot;,
      &quot;flag&quot;: &quot;&#127463;&#127466;&quot;,
      &quot;code&quot;: &quot;BE&quot;,
      &quot;dial_code&quot;: &quot;+32&quot;
    },
    {
      &quot;name&quot;: &quot;Belize&quot;,
      &quot;flag&quot;: &quot;&#127463;&#127487;&quot;,
      &quot;code&quot;: &quot;BZ&quot;,
      &quot;dial_code&quot;: &quot;+501&quot;
    }
  ]

const selectedCountry = countryOptions[0]

&lt;/script&gt;

答案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:

&lt;v-autocomplete
  ...
  return-object
&gt;

Here it is in a playground

huangapple
  • 本文由 发表于 2023年7月24日 16:04:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76752476.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定