Vuejs Vuetify如何在v-select中访问对象的属性

piwo6bdm  于 2023-05-07  发布在  Vue.js
关注(0)|答案(6)|浏览(194)

我的用例。
1.我从一个后端API得到了一个对象数组。
1.我想在v-select中渲染这些对象
这是我的代码。

<v-select
  :items="categories"
  name="category"
  label="Select a category"
  v-model="category"
  v-validate="'required'"
>
</v-select>

但它给了我输出。

但我希望对象名称属性显示在v-select

我们会在vanilla Vue.js中执行此操作

<li v-for="cat in categories" :key="cat.name">{{cat.name}}</li>

但是在vuetify中,我们不能这样做。

:items="categories.name"

Vuetify文档
可以是对象数组或字符串数组。使用对象时,将查找文本和值字段。这可以使用item-text和item-value属性进行更改。
item-textitem-value的实际含义如何使用item-text实现这一点

inb24sb2

inb24sb21#

您的类别有name属性,您可以传递给item-text

<v-select
  :items="categories"
  v-model="category"
  name="category"
  v-validate="'required'"
  item-text="name"
  label="Select a category"
/>
jgovgodb

jgovgodb2#

我在codepen上的一个例子中看到过类似的解决方案,但是由于某种原因,仅仅为我的item-text分配“名称”并不起作用。在name属性周围添加单引号,从而使其成为字符串,这对我来说是有效的(但我不知道为什么):

<v-select v-if="categories"
  :items="categories"
  :item-text="'name'"
  :item-value="'name'"
  v-model="selectedCategory"
  name="selectedCategory"
  label="Select categories"
  solo
  dark
>
</v-select>

<script> ...
categories: [
  { name: "test", path: "test" },
  { name: "test1", path: "test1" }
],
</script>
pnwntuvh

pnwntuvh3#

对于那些仍在查找的用户,item-name和item-value属性用于指定从项中返回的名称和值的值。如果你只想显示名称,但保留整个对象作为值,return-object prop将返回v-model中的整个对象。
查看以下文档:https://vuetifyjs.com/en/components/selects/#custom-text-and-value

<v-select :items="categories" v-model="category" name="category"
v-validate="'required'" item-text="name" return-object label="Select a category"
/>
cqoc49vn

cqoc49vn4#

对于Vuetify 2.x,使用<v-slot:item>插槽自定义列表,使用<v-slot:selection>自定义选择。检查文档中的v-select插槽列表

<v-select
  :items="categories"
  name="category"
  label="Select a category"
  v-model="category"
  v-validate="'required'"
>

  <template v-slot:item="{item}">
    {{item.name}}
  </template>    
  <template v-slot:selection="{item}">
    {{item.name}}
  </template>
</v-select>
jaql4c8m

jaql4c8m5#

要明确的是这里的脚本

<template>
  <v-select 
    outlined
    :items="areas"
    v-model="area"
    name="area"
    item-text="text"
    label="Area"
    return-object
  ></v-select>
</template>

<script>
export default {
  data: () => ({
     area: { text: 'area', disabled: false, status: false },
     areas: [
       { text: 'Pre-op', disabled: false },
       { text: 'Operational', disabled: false },
       { text: 'USDA', disabled: false },
     ],
  }),
}
</script>
93ze6v8z

93ze6v8z6#

for me it worked:

<v-select v-if="categories"
  :items="categories"
  :item-title="'name'" //alter here item-text to item-title
  :item-value="'name'"
  v-model="selectedCategory"
  name="selectedCategory"
  label="Select categories"
  solo
  dark
>
</v-select>

<script> ...
categories: [
  { name: "test", path: "test" },
  { name: "test1", path: "test1" }
],
</script>

相关问题