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}]

两者都具有CCD_ 2和CCD_。

我想创建一个返回所选对象的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是一个特殊的键，用于呈现不可选择的项：

具有标头或分隔符属性的对象被视为特殊情况，并生成列表标头或分隔符；这些项目是不可选择的。

作为一种变通方法，您可以使用一个计算道具，它只从$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">

请注意，计算的道具映射还返回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
}
}

演示