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

我正在尝试使用返回对象指令

我有一个对象列表：

[{"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\u名称

我想创建一个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>

它不工作-它使用标题属性作为文本，我不能单击/选择其中任何一个

您知道问题出在哪里吗？

指示标题是一个特殊的键，用于呈现不可选择的项目：

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

作为一种解决方法，您可以使用计算道具，该道具仅从$store.state.listingTemplates提取所需字段，即profile_name和id:

导出默认值{ 计算：{ 计算列表模板{ 返回此项。$store.state.listingTemplates.mapt=>{ 文本：t.profile_name， 值：t.id， item:t，//还返回原始对象 } } } } 然后将该计算道具与v-select一起使用，同时删除项目文本和项目值道具：

请注意，计算的属性映射还将返回项属性中的原始对象，并且使用，v模型将包括原始对象

v模型变量的示例值：

{ 文字：电视商店， 价值：2， 项目：{ id:2， 简介名称：电视商店， 数量：8， 价格乘数：1， 页眉：这是一个页眉。页眉比以前的页眉长一点，这样我可以看到它的行为。。。， 位置：空， 运费：9 } }

---

您正在使用哪个版本的vuetify？这是完整的密码吗？因为vuetify没有理由在默认情况下将标题字段用作文本。通常，如果没有提供任何内容，它应该只显示Object对象。只需检查vuetify的一些版本。旧版本没有项目文本项目值道具，因此请确保您使用的是vuetify的当前版本。可以在0.14中确认此问题，但更新版本（如2.*）正在按预期工作。是的，这是完整的代码。我甚至检查了商店的格式是否正确。它是。我使用theme，在package.json中有vuetify:^2.4.3，我使用Lux theme，并且安装了哪个版本的package lock/warn lock？还有2个吗？谢谢，是的，我是这样做的。我只是想节省一些代码，因为我需要获取对象，而不仅仅是它的id。因此，我使用另一种方法，通过它的id在listingTemplates中查找对象。您可以在计算属性的映射中包含原始项。请参阅更新的答案和演示。