<script src="https://cdn.uv.cc/vue/2.6.10/vue.min.js"></script>
<div id="app">
<input
v-model="li[0]" />
<div>
为什么下面的不能双向绑定？
</div>
<div v-for="item of li">
{{item}}
<input
v-model="item" />
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
li: [1, 2, 3],
},
})
</script>
解决方法：v-model 要绑定到对象 Object 上才能双向响应。
改成这样就行了：
<script src="https://cdn.uv.cc/vue/2.6.10/vue.min.js"></script>
<div id="app">
<input
v-model="li[0].v" />
<div>
v-model要绑定到对象上
</div>
<div v-for="item of li">
{{item.v}}
<input
v-model="item.v" />
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
li: [{v:1}, {v:2}, {v:3}],
},
})
</script>
在上一个解决方案中，改变了 li 的数据结构。
然而，实际中，我们可能不应改变 li 的数据结构。
因此，推荐这个方法：
<script src="https://cdn.uv.cc/vue/2.6.10/vue.min.js"></script>
<div id="app">
<input
v-model="li[0]" />
<div>
要告诉 v-model 是谁的值
</div>
<div v-for="item, index of li">
{{item}}
<input
v-model="li[index]" />
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
li: [1, 2, 3],
},
})
</script>
去创作