如何使用 Vuejs 删除数组中单击的项目？

Question

这里的问题是我的 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>

Answer 1

我相信这是可行的，我将其放入代码沙箱中，因为它使用与您正在使用的 .Vue 文件相同的样式。我在名称中添加了一些数字，表明它正在按预期工作。您的复选框不基于任何数据，因此它们会发生奇怪的变化。

https://codesandbox.io/embed/sweet-ishizaka-s8o71?fontsize=14&hidenavigation=1&theme=dark

如何使用 Vuejs 删除数组中单击的项目？

How do I delete a clicked item within an array with Vuejs?

html

javascript

arrays

web

vue.js