尝试在对象的 v-for 循环中添加 v-model 文本框答案

【问题标题】：Trying to add v-model textboxes in a v-for loop of an Object尝试在对象的 v-for 循环中添加 v-model 文本框
【发布时间】：2021-07-26 03:18:48
【问题描述】：

我有一点问题。我正在尝试遍历一个对象以动态创建文本框，而不是手动写出字段。

editedItem: {
        day: "",
        "9.00 - 10.00": "",
        "10.00 - 11.00": "",
        "11.00 - 12.00": "",
        "12.00 - 13.00": "",
        "13.00 - 14.00": "",
        "14.00 - 15.00": "",
    },

然后在模板中。

<v-col cols="12" sm="6" md="4" v-for="item in editedItem" :key="item">
     <v-text-field v-model="item"></v-text-field>
</v-col>

那是行不通的。我也尝试遍历键（editedItem.keys），但我似乎无法将“项目”分配给 v-model。

【问题讨论】：

可能重复：stackoverflow.com/a/50512617/253298

标签： javascript vue.js vuetify.js

【解决方案1】：

你可以想象模板的行为是这样的：

for (let i in editedItem) {
  let item = editedItem[i];
  // On @input
  item = $event;
}

它正在编辑副本。您可以通过按索引引用 v-model 来解决此问题。

<v-col cols="12" sm="6" md="4" v-for="(item, index) in editedItem" :key="item">
     <v-text-field v-model="editedItem[index]"></v-text-field>
</v-col>

【讨论】：

【解决方案2】：

item 是 editedItem.keys(days,...) 的值，对于 objects 迭代 (v-for)，第二个参数是实际键。

v-for="(value, key) in object".

所以，像这样改变你的代码，它会起作用的

<v-col cols="12" sm="6" md="4" v-for="(item, key) in editedItem" :key="item">
     <v-text-field v-model="editedItem[key]" />
</v-col>

【讨论】：