Vue.js - 單擊事件和“this”

Question

我在 vue 中有一個待辦事項列表，我正在使用pop()清除/刪除列表項。 請參閱下面有問題的代碼：

 // components Vue.component('todoitem', { template: "<li>Test Item</li>" }) // app code var app = new Vue({ el: '#app', data: { todos: [ { text: 'Sample Item 1' }, { text: 'Sample Item 2' }, { text: 'Sample Item 3' } ], button: { text: 'Hide' }, seen: true }, methods: { addItem: function() { let item = document.getElementById("list-input").value; let error = document.getElementById("error"); if (item == "") { error.style.display = "block"; } else { app.todos.push({ text: item }); error.style.display = "none"; } }, removeItem: function() { this.todos.pop(); }, toggleSeen: function() { app.seen = !app.seen; app.button.text = app.seen ? 'Hide' : 'Show'; } } });

 .todo-list { list-style-type: square; } .todo-list__delete { display: none; } li:hover .todo-list__delete { display: inline-block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="app"> <ul class="todo-list"> <li v-for="todo in todos"> {{ todo.text }} <a v-on:click="removeItem" class="todo-list__delete" href="#">Delete</a> </li> </ul> <input type="text" id="list-input"> <input type="submit" id="list-submit" v-on:click="addItem"> <span id="error" style="color: red; display: none;">Please Enter Text</span> <ul> <todoitem></todoitem> </ul> <h2 v-if="seen">SEEN</h2> <button id="hide-seen" v-on:click="toggleSeen">{{ button.text }}</button> </div>

預期的行為是，當單擊刪除時，它會調用 removeItem 函數，並在該函數中使用this刪除所選項目。 然而，實際發生的是它只是從底部開始刪除節點。

我認為這個問題是與this實際上我引用刪除鏈接，而不是實際的<li>元素我試圖刪除。 所以我嘗試了兩者：

removeItem: function() {
    this.todos.parentElement.pop();
}

和：

removeItem: function() {
    this.parentElement.todos.pop();
}

沒有運氣。

this在 Vue 中是如何工作的？

Answer 1

在這種情況下， this指的是 Vue 組件（而不是 DOM 元素）。 this.todos是組件data對象內的todos數組， pop刪除數組的最后一項。 這就是為什么要刪除最后一個元素的原因。

如果要刪除特定元素，則需要將一些有關要刪除的元素的信息傳遞給removeItem函數，然后讓removeItem()從todos數組中刪除該特定元素，而不是pop最后一個元素。 一種簡單的方法是將數組索引傳遞給removeItem函數，然后將該索引從 todos 數組中splice出來：

<li v-for="(todo, index) in todos">
  ...
  <a v-on:click="removeItem(index)">Delete</a>
</li>

removeItem: function(index) {
  this.todos.splice(index, 1);
},

應用了該更改的完整代碼段如下：

 // components Vue.component('todoitem', { template: "<li>Test Item</li>" }) // app code var app = new Vue({ el: '#app', data: { todos: [ { text: 'Sample Item 1' }, { text: 'Sample Item 2' }, { text: 'Sample Item 3' } ], button: { text: 'Hide' }, seen: true }, methods: { addItem: function() { let item = document.getElementById("list-input").value; let error = document.getElementById("error"); if (item == "") { error.style.display = "block"; } else { app.todos.push({ text: item }); error.style.display = "none"; } }, removeItem: function(index) { this.todos.splice(index, 1); }, toggleSeen: function() { app.seen = !app.seen; app.button.text = app.seen ? 'Hide' : 'Show'; } } });

 .todo-list { list-style-type: square; } .todo-list__delete { display: none; } li:hover .todo-list__delete { display: inline-block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="app"> <ul class="todo-list"> <li v-for="(todo, index) in todos"> {{ todo.text }} <a v-on:click="removeItem(index)" class="todo-list__delete" href="#">Delete</a> </li> </ul> <input type="text" id="list-input"> <input type="submit" id="list-submit" v-on:click="addItem"> <span id="error" style="color: red; display: none;">Please Enter Text</span> <ul> <todoitem></todoitem> </ul> <h2 v-if="seen">SEEN</h2> <button id="hide-seen" v-on:click="toggleSeen">{{ button.text }}</button> </div>