Vue.js 在 vfor 循环中使用 vmodel

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

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

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <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>
  </ol>
</div>

Vue.js相关问答推荐

Nuxt 3中间件在部署到Netliy时基于IP国家代码的重定向不起作用

Select 项目后，Vuetify v-select在select后面显示数字1

使用 cypress 进行 e2e 测试的 vuejs 期间出现 Webpack 错误

vue router/：param 斜杠的参数

是否可以在没有 Vue 的情况下使用 Vuex？

在 vue.js 中获取当前时间和日期

更新 v-for 中使用的数组内的对象时，Vue js react性问题

将 props 传递给 Vue 组件中的元素属性

怎样1秒后自动隐藏VueJS中的元素

是否可以在 vue-devtools 中命名 Vue 实例？

如何使用 vuex 删除项目？

Vuex - 何时从 http 服务器加载/初始化存储数据

[Vue 警告]：无效的props：propsscrollThreshold的类型判断失败.期望的数字，得到字符串

如何将数据属性设置为从 Vuex getter 返回的值

如何将 Angular 和 Vue 项目合并在一起？

Vuetify - 如何进行分页？

如何从扩展面板(Vuetify)中删除阴影？

您正在运行 Vue 的 esm-bundler 构建

如何在 vuejs 中的基于类的组件中编写计算设置器

超过最大调用堆栈大小 Vuetify