這里的問題是我的splice()方法似乎根本不起作用。這只是一個簡單的待辦事項應用程式，我想通過單擊按鈕洗掉特定任務。我已經嘗試過更流行的 Stack Overflow 執行緒中的解決方案，但它們似乎對我不起作用。這些專案確實被洗掉了，但只有最后一個，而不是我點擊的那個
<template>
<div class="task-wrapper">
<p id="task-counter"> Tasks Today: {{ taskArr.length }} </p>
<div class="task-counter-wrapper">
<!-- ? Render if there are no tasks available: -->
<div class="empty-msg"
v-if="taskArr.length == 0"
>
<p>Start by adding a New Task!</p>
</div>
<div class="task-list"
v-for="(task, idx) in taskArr"
:key="idx">
<div class="list-item">
<div class="container">
<input class="list-checkbox" type="checkbox">
({{ idx 1}}) {{ task.name}}
</div>
<div class="item-actions">
<button class="edit-item btn"
v-on:click="editItem()"
>
<img class="icon" src="./Images/editing.png">
</button>
<button class="delete-item btn"
v-on:click="deleteItem(idx)"
>
<img class="icon" src="./Images/delete.png">
</button>
</div>
</div>
</div>
</div>
<div class="add-task-wrapper">
<button id="add-task-btn" v-on:click="addItem()">
Add a new task
</button>
</div>
</div>
</template>
export default {
data() {
return {
taskArr: [],
}
},
methods: {
addItem() {
this.taskArr.push({
name: 'Empty task',
status: 'Undone'
})
},
deleteItem(idx) {
this.taskArr.splice(idx, 1)
},
}
}
</script>
uj5u.com熱心網友回復：
我相信這是有效的，我將其放入代碼沙箱中，因為它使用與.Vue您正在使用的檔案樣式相同的檔案。我在名稱中添加了一些數字，表明它按預期作業。您的復選框不基于任何資料，因此它們的變化很奇怪。
https://codesandbox.io/embed/sweet-ishizaka-s8o71?fontsize=14&hidenavigation=1&theme=dark
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/363676.html
標籤：javascript html 数组 Vue.js 网络
上一篇：將大量JSON檔案合并為一個