从计算的反向方法Vuejs中删除一个数组

Question

美好的一天，如何从反向方法中删除数组？

这是我的代码

const app = Vue.createApp({
    data() {
        return {
            app_title: 'Simple Checklist App',
            entered_task_value: '',
            list_of_tasks: [],
            is_priority: false,
        }
    },
    computed: {
        reverseItems() {
            return [...this.list_of_tasks].reverse();
        }
    },
    methods: {
        add_item() {
            this.list_of_tasks.push(
                {
                    id: this.list_of_tasks.length + 1,
                    data: this.entered_task_value,
                    priority: this.is_priority,
                }
            );
            this.entered_task_value = '';
            this.is_priority = '';
        },
        total_tasks() {
           return this.list_of_tasks.length;
        },
        remove_item(task_index) {
            return this.reverseItems.splice(task_index, 1);
        }
    },
});


app.mount('#app');

remove_item方法不起作用，我不确定如何正确调用computed中的属性

remove_item(task_index) {
            return this.reverseItems.splice(task_index, 1);
        }

这是 HTML

            <ul>
            <li
                v-for="(task, task_index) in reverseItems"
                class="item"
                :key="task.id"
                :class="{priority: task.priority}"
            >
            {{task.id}}
            {{task.data}}
             <button v-on:click="remove_item(task_index)">Remove</button>
            </li>
        </ul>

先感谢您！

Answer 1

您应该更新任务数组的 list_of_tasks 而不是computed数组。

计算值是根据实际数据计算的，并在每次数据更改时更新。

这是关于 vue.js 中计算属性的文档

---

这是一个小例子

 new Vue({ el: '#app', data: () => { return { myArr: [1,2,3,4,5] } }, computed: { myArrReversed(){ return [...this.myArr].reverse() } }, methods : { addItem(){ this.myArr.push(this.myArr.length +1) }, removeItem(){ this.myArr.splice(this.myArr.length - 1, 1) }, } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ul> <li v-for="item of myArrReversed" :key='item'> {{item }} </li> </ul> <button @click="addItem">Add item</button> <button @click="removeItem">Remove item</button> </div>