如何在 v-model 中获取对象？验证答案

【问题标题】：How to get an object in v-model? Vuetify如何在 v-model 中获取对象？验证
【发布时间】：2019-03-07 21:58:49
【问题描述】：

我正在使用v-autocomplete 获取用户在表单中的输入。

<v-autocomplete
       v-model="selected"
       :items="items"
       item-text="short"
       item-value="long"
       chips
       deletable-chips/>

items的结构是这样的：

[
   {
    "long": "item-key",
    "property": [
        {
            "long": "I dont need this",
            "short": "this is what I need"
        }
    ],
    "short": "item-text"
}]

当密钥应该是long 时，我需要访问用户选择的property 字段。所以我想知道是否有一种方法可以让 v-model 保存整个对象，以便我可以访问表单其他部分的property？如果不是，那么我可以使用什么替代方法来解决问题？

非常感谢任何帮助

【问题讨论】：

您可以使用<v-autocomplete return-object ... 并从docs 中删除item-value="long" ，
谢谢@ljubadr。我像 <div v-for="item in selected.property" >{{item.short}} </div> 这样使用它，但有一个问题，那就是当我取消选择已选择的项目时，除非我刷新，否则我仍然会在 DOM 上看到 {{item.short}}。既然它在v-model 中，那不应该消失吗？
当你清除选择时，this.selected 将是null，你的v-for="item in selected.property" 将抛出错误。你需要把它包装在<template v-if="selected"> <div v-for="....">... </div></template>
您可能应该创建计算属性：getSelectedPropertyShort() { return this.selected ? this.selected.property[0].short : ''}。不确定您将在 property 数组中拥有哪些值，但这仅在长/短是数组中的第一个值时才有效。如果你有更复杂的逻辑，很容易将它添加到这个计算属性中
@ljubadr v-if 工作。我还需要计算属性吗？

标签： vue.js customization vuetify.js v-model v-select

【解决方案1】：

不，这会违背 Vue 本身的核心概念。

相反，让我们使用 getter：

get selectedItemObject() {
    return this.items.filter(obj => obj.property[0].long === this.selected)
}

这里是伪代码，确保类型和选择器安全。

【讨论】：

非常感谢您的帮助。我以前从未见过在 Vue 中使用过 getter。我会把它放在哪里？在方法或计算属性中？
我的问题可能不是很清楚，但我不需要 property[0].long 并且 items 数组可能很长。这只是结构。对不起，我的任何困惑。我已经更新了我的问题以显示哪个是关键