Question

使用Vue.js，我显示带有复选框的项目列表。单击“复选框”将使用删除线向下移动项目。问题是，当我点击复选框时，选中了错误的复选框。

例如，当我点击Apple复选框时，会选中橙色复选框。

这是我的代码，

＆＃13;

var myApp = new Vue({
  el: '#myApp',
  data: {
    lists: [
      {title: 'Apple', isChecked: false},
      {title: 'Orange', isChecked: false},
      {title: 'Grapes', isChecked: false}
    ]
  },
  computed: {
    filterLists: function(){
      return _.orderBy(this.lists, ['isChecked', false]);
    }
  },
  methods: {
    completeTask: function(e, i){
      e.preventDefault();
      this.lists[i].isChecked = !this.lists[i].isChecked;
    }
  }
})

＆＃13;

.completed{
  text-decoration: line-through;
  color: red;
}

＆＃13;

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

<div id="myApp">
  <ul>
      <li v-for="(list, index) in filterLists">
        <input type="checkbox" v-bind:id="'todo-' + index" v-on:change="completeTask($event, index)" />
        <span class="title" v-bind:class="{completed: list.isChecked}">{{list.title}}</span> 
        </li>
      
    </ul>
 </div>

＆＃13;

Answer 1

索引搞砸了，您可以通过绑定已检查状态来修复它

<input type="checkbox" v-bind:checked="list.isChecked" v-bind:id="'todo-' + index" v-on:change="completeTask($event, index)" />

将完整任务更改为只传递项目：

<input type="checkbox" v-bind:id="'todo-' + index" v-on:change="completeTask(list)" v-bind:checked="list.isChecked" />

见小提琴：

https://jsfiddle.net/d6encxe1/3/

您应该删除'id'或使用除循环索引之外的其他内容，因为重新排序索引时不会更改。

Answer 2

使用key。密钥唯一标识Vue中的元素。如果您不使用密钥，Vue将尝试重用现有元素以提高性能。

给Vue一个提示，以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要提供唯一键每个项目的属性。 key的理想值是唯一id 每个项目。

渲染列表时，总是使用密钥。在这里，我使用了列表项的标题，但理想情况下，您应该生成一个唯一的密钥。

<li v-for="(list, index) in filterLists" :key="list.title">

此外，您不需要传递索引。只需传递该项目。

v-on:change="completeTask(list)"

在completeTask中，检查它。

completeTask: function(task){
  task.isChecked = !task.isChecked
}

最后，遍历您的li元素，而不是您的ul元素。

更新了fiddle。

Answer 3

您可能希望将v-for放入<li>而不是<ul>，否则您将获得多个<ul>元素。

你没有提供key。您应该为项目提供唯一的密钥。例如，如果title是唯一的，您可以将其用作key，或者您可能需要添加其他属性，例如id。

此外，您可以将整个列表项传递给方法而不仅仅是索引，因为索引在您的情况下是可更改的：

v-on:change="completeTask($event, list)"

这里的工作示例：https://jsfiddle.net/0r2yb0z6/1/

Vue.js - 选中了错误的复选框

3 个答案: