Vue 및 Vuex v-상태 변경 시 제대로 업데이트되지 않음

Vue 및 Vuex v-상태 변경 시 제대로 업데이트되지 않음

여기 내 스토어 및 삭제 변환이 있습니다.

const store = new Vuex.Store({
  state: {
    todos: [
      {
        date: "22/03/1994",
        todos: [
          { icon: 0, text: "seyehate çıkılacak " },
          { icon: 0, text: "seyehate çıkılacak " },
        ]
      },
      .....
    ]
  },

  getters: {
    getTodos: state => {
      return state.todos
    }
  },

  mutations: {
     delete(state, { dateIndex, index }) {
      console.log("dateIndex", dateIndex)
      if (state.todos[dateIndex].todos.length == 1) {
        state.todos.splice(dateIndex, 1)
      } else {
        state.todos[dateIndex].todos.splice(index, 1)
      }
    }
  },
})

주요 컴포넌트는 다음과 같습니다.

<ListDate
  v-for="(item, index) in list"
  :key="index"
  :todos="item"
  :dateIndex="index"
></ListDate>

그리고 나는 getters로 데이터를 계산했다.

computed: {
  list() {
    return this.$store.getters.getTodos;
  },
},

및 ListDate 컴포넌트:

<ListItem
  v-for="(item, index) in dateTodos"
  :key="index"
  :message="item.text"
  :icon="item.icon"
  :dateIndex="dateIndex"
  :index="index"
/>

이 컴포넌트에서는 delete mutation을 커밋합니다.동작하지만 dateIndex와 중복하면 올바르게 동작하지 않습니다.상태를 보면 변경되었지만 목록이 올바르게 표시되지 않습니다. 일부 인덱스를 갑자기 삭제하면 상태는 정상이지만 보기가 올바르지 않습니다.상태 데이터를 올바르게 렌더링하려면 어떻게 해야 합니까?

이왕이면v-for사용하다index로서key항목을 삭제하면 다음 항목이 해당 위치로 슬라이드되어 DOM이 재사용됩니다.

개체에서 키로 사용할 진정으로 고유한 속성을 생성해야 합니다(예:id:

todos: [
  { id: 1, icon: 0, text: "seyehate çıkılacak " },
  { id: 2, icon: 0, text: "seyehate çıkılacak " },
]

그리고 그 속성을 사용하세요.key:

<ListItem
  v-for="(item, index) in dateTodos"
  :key="item.id"
  :message="item.text"
  :icon="item.icon"
  :dateIndex="dateIndex"
  :index="index"
/>

언급URL : https://stackoverflow.com/questions/66521470/vue-and-vuex-v-for-not-updating-properly-when-state-changes