为什么组合框不更新已编辑的项目模型？

Question

组合框是这样定义的：

<template>
   <v-combobox
   clearable
   v-model="values"
   :items="items"
   item-text="name"
   ></v-combobox>
</template>

<script>
data () {
    return {
        items: [
            {"id": 2, "name": "tree"},
            {"id": 4, "name": "grass"},
            {"id": 5, "name": "freeze"},
            {"id": 9, "name": "moss"}
        ],
        values: ''
    },
    watch: {
        values () {
            console.log(this.values) // Output: {__ob__: Observer}: e.g. id: 2, name: tree
        }
    }
}
</script>

组合框项目是可编辑的：我可以 select 其中之一（然后 Observer 登录到控制台），然后编辑它，但控制台中没有任何反应。

如何使用编辑的条目更新模型？

编辑：刚发现模型在离开组合框字段 (onBlur) 时得到更新。如何将此行为更改为例如onKeyDown?

EDIT2：另一个发现：在组合框外单击时，values 会重置（未定义）。所以，只能考虑onChange事件。

Answer 1

缺少属性 item-value，您可以这样做：

 items: [
            {"id": 2, "name": "tree", "value" : 1},
            {"id": 4, "name": "grass", "value" : 2},
            {"id": 5, "name": "freeze", "value" : 3},
            {"id": 9, "name": "moss", "value" : 4}
        ],

并在您的标签中

  <v-combobox
   clearable
   v-model="values"
   :items="items"
   item-text="name"
   item-value = "value"
   @change = "values()"
   ></v-combobox>

Answer 2

我想出了解决方法，但我认为它不是一个优雅的解决方法。

为了清楚起见：我需要将 id 和 name 都传递给 combobox。 id 是 read-only，而 name 条目必须是可编辑的。由于 item-value="id" 添加到 combobox 定义，id 被传递给 values 模型（它已经在下面的讨论中评论 Germano Buss Niehues' 回答）。 name 仅在选择项目时由模型更新，但在编辑后不会更新。 name 的编辑值是我需要的东西。

最后，我将普通 HTML id 字段添加到 combobox:

<template>
   <v-combobox
     clearable
     id="words_names"
     v-model="values"
     :items="items"
     item-text="name"
   ></v-combobox>
</template>

并读取最终值：

document.getElementById("words_names").value

正如我所说，不是很优雅，但它的工作...

为什么组合框不更新已编辑的项目模型？

Why doesn't combobox update edited item model?

combobox

vue.js

vuetify.js