Question

我正在v-for循环内渲染一个输入字段，并在该输入中使用v-model来获取输入的值，但是当我键入任何输入时，该值将在每个文本字段中键入。 / p>

我已在此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 }
    ]
  },
})

Answer 1

是的，这显然是因为您将X Input字段绑定到1 Value上。您可能想要的是将score []作为数组放入

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

Answer 2

分数在 v-model =“ score” 中使用时被视为单个变量。

您可以在待办事项中添加得分，并在输入中对其进行v建模，以便您轻松引用每个待办事项的得分值。

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="text" v-model="todo.score">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false, score: '' },
      { text: "Learn Vue", done: false, score: '' },
      { text: "Play around in JSFiddle", done: true, score: '' },
      { text: "Build something awesome", done: true, score: '' }
    ]
  },
})

Answer 3

对于那些寻求动态解决方案的人来说，这是一个更好的解决方案，我们可以找到我和我的同事。尽管可能不是您要找的内容，但它很有意思，以防它变得更加复杂，并且您需要使用第二个循环。

  <div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="(todo,index) in todos">
      <label>
      <div v-for="(val, index2) in todo.quantity" :key="index2">
    <input type="text" v-model="score[index][index2]">
    </div>


    <del v-if="todo.done">
      {{ todo.text }}
    </del>
    <span v-else>
      {{ todo.text }}
    </span>
  </label>
    </li>
  </ol>
  <p>
   {{ scoreVal }}
  </p>
</div>



new Vue({
  el: "#app",
  mounted() {
  this.todos.forEach(item => {

  var a = [];
  var b = item.quantity;


  for(var i=0 ; i<b ;i++)
  {
  a.push("");
  }

  this.score.push(a);

  })
  },
  computed: {
  scoreVal() {
  return this.score;
  },


  },
  data: {
    score: [],
    todos: [
      { text: "Learn JavaScript", done: false, quantity: 3},
      { text: "Learn JavaScript", done: false, quantity: 4},
      { text: "Learn Vue", done: false, quantity: 4 },
    ]
  },
})

https://jsfiddle.net/litusername/ekyftmjo/2/

Answer 4

遇到类似的问题，我需要为每个表字段输入formdData（form-input），但是使用v-for渲染所有表问题导致每当我在任何字段中输入内容时，所有字段均为字段。检查了您上面的解决方案后，尝试了一下，但对我而言不起作用。

<div class="option-section" v-if="question.type === 'TABLE'">
<table class="table b-table table-bordered">
 <thead>
   <tr>
   <th v-for="(column, index) in question.columns" :key="index">
    {{column.body}}
    </th>
    </tr>
  </thead>
 <tbody>
  <tr>
 <td v-for="(column, colindex) in question.columns" :key="colindex">
 <b-form-input size="sm" id="colindex" autocomplete="off"
 class="readonly" readonly disabled></b-form-input>
 </td>
 </tr>
 </tbody>
 </table> 
</div>

最后，我发现了如何解决这个问题，并希望在所有人遇到类似情况时分享。

<div class="option-section" v-if="question.type === 'TABLE'">
  <table class="table b-table table-bordered">
    <thead>
     <tr>
     <th v-for="(column, index) in question.columns" :key="index">
     {{column.body}}
     </th>
   </tr>
 </thead>
  <tbody>
   <tr>
   <td v-for="(column, colindex) in question.columns" :key="colindex">
    <b-form-input v-model="question.columns[colindex].response" id="colindex" :disabled="readOnly" size="sm" autocomplete="off" class="readonly" >
 </b-form-input>
 </td>
 </tr>
  </tbody>
   </table>
</div>

在v-for循环中使用v-model

4 个答案: