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

Posted 2023-02-14

【中文标题】如何使用 Vuejs 删除数组中的单击项？

【英文标题】：How do I delete a clicked item within an array with Vuejs?

【发布时间】：2022-01-01 11:01:58

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

哦，它确实有效。这么愚蠢的错误，非常感谢你让我开眼界！