Vuetify - 项目文本项目值根本不起作用

Question

我正在尝试使用

return-object

指令。

我有一个对象列表：

[{"id":1,"profile_name":"Shoes store","quantity":55,"price_multiplier":0.5,"header":"This is a header","location":"New York","shipping_charge":5},{"id":2,"profile_name":"TV Store","quantity":8,"price_multiplier":1,"header":"This is a header. A little bit longer header than the header before so I can see how it behaves...","location":null,"shipping_charge":9}]

两者都有

id

和

profile_name

。

我想创建一个返回所选对象的

v-select

。

   <v-select v-model="template" :items="$store.state.listingTemplates"
                        :error-messages="formErrors.sku"
                        label="Template" outlined
                        hide-details
                        item-text="profile_name"
                        item-value="id"
                        return-object
        ></v-select>

它不起作用 - 它使用

header

属性作为

text

，我无法单击/选择其中任何一个。

你知道问题出在哪里吗？

Answer 1

v-select.items

的文档表明

header

是呈现不可选择项目的特殊键：

具有 header 或 divider 属性的对象被视为特殊情况，并生成列表标题或分隔符；这些项目无法选择。

作为解决方法，您可以使用计算属性，仅从

$store.state.listingTemplates

中提取所需的字段（即

profile_name

和

id

）：

export default {
  computed: {
    computedListingTemplates() {
      return this.$store.state.listingTemplates.map(t => ({
        text: t.profile_name,
        value: t.id,
        item: t, // also return original object
      }))
    }
  }
}

然后将计算得到的道具与

v-select

一起使用，同时删除

item-text

和

item-value

道具：

<v-select :items="computedListingTemplates">

请注意，计算出的 prop 映射还会在

item

属性中返回原始对象，并且使用

<v-select return-object>

，

v-model

将包含原始对象。

v-model

变量的示例值：

{
  "text": "TV Store",
  "value": 2,
  "item": {
    "id": 2,
    "profile_name": "TV Store",
    "quantity": 8,
    "price_multiplier": 1,
    "header": "This is a header. A little bit longer header than the header before so I can see how it behaves...",
    "location": null,
    "shipping_charge": 9
  }
}

演示

Answer 2

vuetify：^3.5.2，2024 年 2 月。

到目前为止，这仍然有问题，

v-list

无法与

item-text

item-value

属性一起使用，它们的 API 文档和/或代码库不相符。

你有2个选择：

简单，您的对象结构必须包含

{ title: 'blah' }

字段。不要在

item-text

中使用

item-value

<v-list>

属性，它会拾取标题字段并自动工作。

很难，为项目和选择槽实现您自己的模板。

<v-list ...>
  <template v-slot:item="{item}">
    {{item.id}} {{item.profile_name}}
  </template>    
  <template v-slot:selection="{item}">
    {{item.id}} {{item.profile_name}}
  </template>
</v-list>