从计算的反向方法 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

中的documentation about computed properties

这是一个小例子

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>

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

Remove an array from computed reverse method Vuejs

javascript

vue.js