어레이가 변경되어 v-key가 지정된 경우에도 VueJ가 목록을 다시 렌더링하지 않음

어레이가 변경되어 v-key가 지정된 경우에도 VueJ가 목록을 다시 렌더링하지 않음

두 개의 엔티티가 있습니다.카테고리와 서브카테고리와 두 개의 리스트.사용자가 범주를 선택하면 하위 범주 목록이 표시됩니다.

처음에는 정상적으로 동작하지만, 카테고리를 변경하면 오래된 서브 카테고리 리스트가 표시됩니다.

범주 및 하위 범주는 모두 vuex 저장소에 있습니다.

다음 방법으로 하위 범주를 계산하려고 했습니다.

1. 계산된 속성
2. 사용자가 범주를 선택하면 category_id별로 하위 범주를 필터링하고 새 목록을 반환하는 메서드를 호출합니다.

난 아무 것도 안 먹혔어.다음은 계산된 속성의 예입니다.

subCategories() {
  return this.getClothingSubCategories.filter((subCategory) => {
    return subCategory.clothing_category_id === this.category.clothing_category_id
  })
},

어디에this.getClothingSubCategoriesvuex getter 입니다.

이상한 점은 vue 플러그인(크롬 개발자 도구)과 콘솔 모두 목록을 업데이트했지만 html에서는 오래된 목록입니다.

목록을 표시하는 방법은 다음과 같습니다.

<VuePerfectScrollbar class="categories"
                     v-if="showSubCategories"
                     v-once>
  <ul>
    <li v-for="subCategory in subCategories"
        :key="subCategory.clothing_subcategory_id"
        @click="selectSubCategory(subCategory)">
      <div class="title">{{ subCategory.title }}</div>
      <div class="arrow">></div>
    </li>
  </ul>
</VuePerfectScrollbar>

따라서 서브카테고리 속성은 카테고리 오브젝트에 의존합니다.이러한 오브젝트는 간단하게 설정합니다.

selectCategory(category) {
  this.category = category
},

사용자가 카테고리를 선택한 경우.

:key를 지정하고 다른 방법을 시도했지만 아무 것도 작동하지 않았습니다.항상 오래된 서브카테고리의 리스트가 표시됩니다.

이유가 뭘까요?

갱신하다

Vuex getter:

export const getClothingSubCategories = (state) => {
  return state.clothingSubCategories
}

컴포넌트 데이터:

data() {
    return {
      gender: 'female',
      category: null,
      subCategory: null,
      good: null,

      filters: {
        gender: 'female',
        clothing_subcategory_id: null
      }
    }
  },

선언을 고려합니다.

<VuePerfectScrollbar class="categories"
                     v-if="showSubCategories"
                     v-once>
  <ul>
    <li v-for="subCategory in subCategories"
        :key="subCategory.clothing_subcategory_id"
        @click="selectSubCategory(subCategory)">
      <div class="title">{{ subCategory.title }}</div>
      <div class="arrow">></div>
    </li>
  </ul>
</VuePerfectScrollbar>

그subCategoriesvalue. 계산 속성입니다.

subCategories() {
  return this.getClothingSubCategories.filter((subCategory) => {
    return subCategory.clothing_category_id === this.category.clothing_category_id
  })
},

언제든지 업데이트 되어야 합니다.category변화들.

보고하신 대로입니다.당연히 그래야죠.

단, 문제는 다음과 같습니다.

v-once

세부사항:

요소 및 구성 요소를 한 번만 렌더링하십시오.이후 재렌더에서는 요소/컴포넌트와 그 모든 하위 요소가 정적 콘텐츠로 처리되어 건너뜁니다.이를 사용하여 업데이트 성능을 최적화할 수 있습니다.

즉, Vue가 처음 서브카테고리 컬렉션을 렌더링하면 "프리징"합니다.기본적으로는v-once다시 업데이트되지 않습니다.

해결책: 삭제v-once.

코드의 다른 장소에서도 삭제할 것을 권장합니다.업데이트하려는 요소에는 다음 요소가 없어야 합니다.v-once.

언급URL : https://stackoverflow.com/questions/49593408/vuejs-does-not-rerender-list-even-though-array-has-changed-v-key-is-specified