Vuetify v-autocomplete v-text显示整个对象而不是仅显示文本

dw1jzc5e  于 2023-03-31  发布在  Vue.js
关注(0)|答案(2)|浏览(202)

Vuetify v-autocomplete v-text显示完整的对象而不是文本。

这是密码。

data() {
    return {
      people: [
        { name: "test1", value: 1 },
        { name: "test2", value: 2 },
      ]
    };
  },

组件

<v-autocomplete
   v-model="friends"
   :disabled="isUpdating"
   :items="people"
   item-text="name"
   item-value="id"
   @change="changed"
   filled
   chips
   color="blue-grey lighten-2"
   label="Participants"
   multiple
>

有帮助吗?提前感谢。

xiozqbni

xiozqbni1#

根据所提供的信息,您所拥有的似乎没有任何问题。但是,如果您在v-autocomplete选项卡中使用v-autocomplete的#item插槽,则可能是问题的根源。
在你的v-autocomplete组件中有这样一个块会导致你描述的问题:

<v-autocomplete ...>
  <template v-slot:item="data">
    {{ data }}
  </template>
</v-autocomplete>
k5ifujac

k5ifujac2#

您的代码可以正常工作,请仔细检查演示:
https://codesandbox.io/s/vuetify-example-sandbox-forked-9ys2tw?file=/src/components/TestComponent.vue
您也可以尝试其他选项,如:
将item-text更改为:

:item-text="item => item.name"

相关问题