vue.js 如何显示多个属性,同时选择项目在v-自动完成?

oxalkeyp  于 2022-12-19  发布在  Vue.js
关注(0)|答案(3)|浏览(170)

如何实现v-autocomplete,以便在选择时同时显示值和文本?
我的密码是-

<v-autocomplete
    v-model="request"
    v-if="products.data"
    :items="products.data"
     outline
    chips
    label="Select item"
    item-text="name"
    item-value="id"
     >
products: [
   {
      text: "Apple",
      value: 209
   },
   {
      text: "Banana",
      value: 229
   }
]

目前,我可以只显示文本,但我想两个显示(文本和值的选项)之前选择。

bqujaahr

bqujaahr1#

要修改下拉项目(选项),请使用项目槽:

<template #item="{ item: { text, value } }">
  <span v-text="text + ' - ' + value" />
</template>

若要修改项目在选定时(在输入区域内)的外观,请使用选择窗:

<template #selection="{ item: { text, value } }">
  <v-chip> {{ text }} - {{ value }} </v-chip>
</template>

上面的两个插槽都是随机的例子。请随意替换它们的标记(HTML)以适合您的项目。
single select为例。
multiple select为例。

yzuktlbb

yzuktlbb2#

利用插槽你可以做到-

<v-autocomplete
   :items="products"
   label="Select"
   item-text="text"
   item-value="value"
 >
  <!-- If you want to modify the selected data -->
   <template v-slot:selection="data">
     {{ data.item.text }} {{ data.item.value }}
   </template>

   <!-- If you want to modify the list options -->
   <template v-slot:item="data">
     {{ data.item.text }} {{ data.item.value }}
   </template>
</v-autocomplete>
hivapdat

hivapdat3#

<v-autocomplete
    v-model="prod"
    v-if="products.text"
    :items="products.value"
    outline
    chips
    label="Select product"
    item-text="text"
    item-value="id"
     >
        <template v-slot:item="data">
        <template v-if="typeof data.item !== 'object'">
        <v-list-item-content v-text="data.item"></v-list-item-content>
      </template>
       <template v-else>
       <v-list-item-content>
  <v-list-item-title class="text-green bank" v-html="data.item.text"></v-list-item-title>
         <v-spacer></v-spacer>
     <v-list-item-subtitle class="value" v-html="data.item.value"></v-list-item-subtitle>
      </v-list-item-content>
         </template>
            </template>

这对我很有帮助,利用老虎机.

相关问题