새 배열이 DOM에서 렌더링되지 않습니다.

새 배열이 DOM에서 렌더링되지 않습니다.

작업관리 목록 항목을 삭제한 후 콘솔에 해당 작업관리는 삭제되지만 목록은 다시 렌더링되지 않으며 삭제된 작업관리는 여전히 목록에 있는 것으로 표시됩니다.getTasks를 통해 목록을 다시 렌더링해야 할 때 전체 목록은 동일하게 유지됩니다.삭제 방법과 새 작업관리 방법을 만드는 ids가 일치하지 않을 수 있습니다. 이해할 수 없습니다.

https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-bkwixg?file=pages%2Findex.vue,store%2Findex.js,components%2FTask.vue

// Child component

<template>
    <p class="content">
      {{ task.todo }}
    </p>
      </button>
      <button @click="() => deleteTask(task.id)" class="delete">Delete</button>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ['task'],
  methods: {
    deleteTask(id) {
      this.$store.dispatch('deleteTask', id);
    },
  },
};
</script>

// Parent component

<template>
  <Task v-for="task in tasks" :key="task.id" :task="task" />
</template>

<script>
export default {
  computed: {
    tasks() {
      return this.$store.getters.getTasks;
    },
  },
  mounted() {
    this.$store.dispatch('getTasks').then((data) => console.log(this.tasks));
  },
};
</script>

/// Store

export const state = () => ({
  tasks: [],
});

export const actions = {
  async getTasks(context) {
    const res = await fetch('https://dummyjson.com/todos/user/5');
    if (res.ok) {
      let result = await res.json();
      context.commit('setTasks', result.todos);
    }
    return res.ok;
  },
  async deleteTask(context, id) {
    const res = await fetch(`https://dummyjson.com/todos/${id}`, {
      method: 'DELETE',
    })
      .then((res) => res.json())
      .then(console.log);
    if (res) {
      let result = await res.json();
      console.log(result);
      context.dispatch('getTasks');
    }
    return res;
  },
};

export const mutations = {
  setTasks(state, data) {
    state.tasks = data;
  },
};

export const getters = {
  getTasks(state) {
    return state.tasks;
  },
};

언급URL : https://stackoverflow.com/questions/76189592/the-new-array-isnt-rerendered-in-the-dom