Vue.js - 選中了錯誤的復選框

Question

使用Vue.js，我顯示帶有復選框的項目列表。 單擊“復選框”將使用刪除線向下移動項目。 問題是，當我點擊復選框時，選中了錯誤的復選框。

例如，當我點擊Apple復選框時，會選中橙色復選框。

小提琴： https ： //jsfiddle.net/d6encxe1/

這是我的代碼，

 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; } } }) 

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

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

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

使用密鑰 。 密鑰唯一標識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元素。

更新了小提琴 。

Answer 3

您可能希望將v-for放在<li>而不是<ul> ，否則您將獲得幾個<ul>元素。

你沒有提供key 。 您應該為項目提供唯一的密鑰。 例如，如果title是唯一的，您可以將其用作key ，或者您可能需要添加另一個屬性，如id 。

此外，您可以將整個列表項傳遞給方法而不僅僅是索引，因為索引在您的情況下是可更改的：

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

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