從計算的反向方法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>