Удалить массив из вычисляемого обратного метода Vuejs

Добрый день, как удалить массив из обратного метода?

Вот мой код

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>

Заранее спасибо!

При добавлении нового элемента вы добавляете в list_of_tasks, который происходит от data. Хорошо. При удалении вы удаляете из reverseItems то есть computed - это невозможно. Вы должны удалить элемент из исходного массива - list_of_tasks

Michal Levý 11.05.2022 15:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме