Vue.js 循环中使用 v-model 的问题及解决方法：v-model 修饰符的使用

2024-03-24 14:40:20

Vue.js 循环中使用 v-model：一种解决方法

问题陈述

在 Vue.js 中，将 v-model 用于循环中的输入字段时，经常会遇到一个问题：当在任何一个输入字段中输入值时，所有字段的值都会发生变化。

解决方案

为了解决这个问题，可以使用 v-model 修饰符。v-model 修饰符允许我们将 v-model 绑定到特定对象属性，而不是整个数组。在循环中使用 v-model 修饰符时，我们需要将属性名称指定为与当前循环项相关的动态值。

例如，考虑以下代码片段：

<input type="text" v-model="score[todo.text]">

在这个代码片段中，score 是一个对象，todo.text 是一个动态属性名称，它根据当前循环中的 todo 项的不同而产生不同的值。这样，每个输入字段都有自己独立的模型，可以独立跟踪其值。

使用 v-model 修饰符的步骤

定义一个对象来存储每个输入字段的值。
在 v-model 指令中使用动态属性名称，该名称根据当前循环项的值而变化。
使用 v-model 修饰符将 v-model 绑定到动态属性名称。

示例代码

以下是一个使用 v-model 修饰符的示例代码：

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

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

<script>
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 }
    ]
  },
})
</script>