问题描述
我正在 v-for 循环内渲染一个输入字段,并在该输入中使用 v-model 来获取输入的值,但是当我输入任何一个输入时,该值会输入到每个文本字段中.
我在这个 fiddle
中复制了我的问题
<h2>待办事项:</h2><ol><li v-for="todo in todos"><标签><input type="text" v-model="score"><del v-if="todo.done">{{ todo.text }}</del><span v-else>{{ todo.text }}</span></ol>
新的 Vue({el: "#app",数据: {分数: [],待办事项: [{ text: "Learn JavaScript", done: false },{ text: "Learn Vue", done: false },{ text: "Play around in JSFiddle", done: true },{ 文本:构建一些很棒的东西",完成:true }]},})
是的,很明显,因为您将 X Input 字段绑定到 1 Value.您可能想要的是将 score[] 作为数组放入,以便使用
<标签><input type="text" v-model="score[index]"><del v-if="todo.done">{{ todo.text }}</del><span v-else>{{ todo.text }}</span>
https://jsfiddle.net/o9awn47v/
I am rendering an input field inside v-for loop and using v-model in that input to get the value of the input but when i type in any one of the input , the value is typed in every text field.
I have replicated my issue here in this fiddle
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<label>
<input type="text" v-model="score">
<del v-if="todo.done">
{{ todo.text }}
</del>
<span v-else>
{{ todo.text }}
</span>
</label>
</li>
</ol>
</div>
new Vue({
el: "#app",
data: {
score: [],
todos: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
},
})
Yes obviously that happens because you bind X Input fields on 1 Value. What you probably want is your score[] to get put in as an Array, for that use
<li v-for="(todo,index) in todos">
<label>
<input type="text" v-model="score[index]">
<del v-if="todo.done">
{{ todo.text }}
</del>
<span v-else>
{{ todo.text }}
</span>
</label>
</li>
https://jsfiddle.net/o9awn47v/
这篇关于在 v-for 循环中使用 v-model的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!