어레이가 변경되어 v-key가 지정된 경우에도 VueJ가 목록을 다시 렌더링하지 않음
두 개의 엔티티가 있습니다.카테고리와 서브카테고리와 두 개의 리스트.사용자가 범주를 선택하면 하위 범주 목록이 표시됩니다.
처음에는 정상적으로 동작하지만, 카테고리를 변경하면 오래된 서브 카테고리 리스트가 표시됩니다.
범주 및 하위 범주는 모두 vuex 저장소에 있습니다.
다음 방법으로 하위 범주를 계산하려고 했습니다.
- 계산된 속성
- 사용자가 범주를 선택하면 category_id별로 하위 범주를 필터링하고 새 목록을 반환하는 메서드를 호출합니다.
난 아무 것도 안 먹혔어.다음은 계산된 속성의 예입니다.
subCategories() {
return this.getClothingSubCategories.filter((subCategory) => {
return subCategory.clothing_category_id === this.category.clothing_category_id
})
},
어디에this.getClothingSubCategories
vuex 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>
그subCategories
value. 계산 속성입니다.
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
'sourcecode' 카테고리의 다른 글
C의 char 문자열을 수정할 수 있습니까? (0) | 2022.08.17 |
---|---|
"실험 구문 'jsx'에 대한 지원이 현재 활성화되지 않았습니다." vue 및 jest를 사용합니다. (0) | 2022.08.17 |
vuex 스토어의 악리를 통해 게시한 후 리다이렉트하는 올바른 방법 (0) | 2022.08.17 |
Vue.js2 - Object.assign({}, this.var)을 차단하는 감시 메서드 (0) | 2022.08.17 |
다차원 어레이의 올바른 할당 (0) | 2022.08.17 |