本文介绍了在 v-for 循环中使用 v-model的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    08-04 06:32
    查看更多