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

Question

Good day, how to remove an array from a reverse method?

Here's my code

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');

The remove_item method is not working and I am not sure how to properly call the property inside the computed

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

This is the 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>

Thank you in Advance!

Answer 1

You should update the list_of_tasks of task array instead of the computed array.

The computed values are calculated from the real data and updated each time the data changes.

Here is the documentation about computed properties in vue.js

---

Here is a small example

 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>