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

Question

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

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。

Answer 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>

Answer 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>

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

Trying to add v-model textboxes in a v-for loop of an Object

javascript

vue.js

vuetify.js