Buen día, ¿cómo eliminar una matriz de un método inverso?
Aquí está mi código
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'); El método remove_item no funciona y no estoy seguro de cómo llamar correctamente a la propiedad dentro del computed
remove_item(task_index) { return this.reverseItems.splice(task_index, 1); }este es el 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>¡Gracias de antemano!
Debe actualizar la lista de tareas de la matriz de tareas en lugar de la matriz computed .
Los valores calculados se calculan a partir de los datos reales y se actualizan cada vez que cambian los datos.
Aquí está la documentación sobre las propiedades calculadas en vue.js
Aquí hay un pequeño ejemplo
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>