v-for使用Map数据结构和v-model

Question

我知道可以使用Map与v-for，但是说，是否可以使用值[key, value]作为v-model?

,

<input v-for="[key, value] in map" :key="key" v-model="key"></input>
...
...
...
data(){
return {
map: new Map([['cool thing 1', 'cool thing 2'], ...])
}
}

ve3是否支持这个功能?

如果不是，可以做什么?

更精确地说，我想在输入

中使用键和值本身作为v-model。

Answer 1

我认为Vue对于v-model的使用只有两个限制

1. 表达式必须是有效的"左侧"(因为v-model="xxx"与:value="xxx" @input="xxx = $event"相同)

2. 两个对-迭代对象时的(key, value)和迭代数组时的(value, index)是循环的局部临时变量，因此在v-model中使用它们没有任何意义。如果您尝试这样做，您将得到一个警告:You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable.

所以你需要后退一步，使用原来的对象/数组与v-model

Arrays:v-model="arr[index]"

对象/地图:v-model="map[key]"

更新

我的想法是用户可以同时输入map的键和值

这是一个坏主意，原因如下。首先，如前所述，key变量是循环中的局部临时变量，因此在v-model中使用它是不可能的。第二(再次-正如之前所说的)，无论您在v-model中放入什么，都必须是"可分配的"。Map对象是不可赋值的——你必须使用set方法来设置特定键的值。因此，v-model在这里不是一个选项(您必须使用事件代替)。最重要的是，Map不允许重复的键，所以让用户自由编辑键是一个非常奇怪的用户体验的秘诀....