即使数组已更改且指定了 v-key，VueJS 也不会重新呈现列表

Question

我有两个实体：类别和子类别以及两个列表。当用户选择一个类别时，我会显示子类别列表。

起初尝试它工作正常，但当我更改类别时，我得到了旧的子类别列表。

类别和子类别都在 vuex 商店中。

我尝试通过以下方式计算子类别：

计算属性
当用户选择一个类别时，我调用一个方法，该方法按 category_id 和 returns 新列表

对我没有任何作用。这是计算属性:

的示例

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

其中 this.getClothingSubCategories 是一个 vuex getter。

奇怪的是，在 vue 插件（在 chrome 开发人员工具中）和控制台中我都更新了列表，但在 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>

因此，subCategories 属性依赖于我简单设置的类别对象：

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
      }
    }
  },

Answer 1

考虑你的声明：

<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 值，它是计算得到的属性:

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

应该在 category 发生变化时更新。

正如您所报告的，确实如此。应该的。

你的问题是：

v-once

Details:

Render the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.

也就是说，一旦 Vue 第一次呈现子类别集合，它就会 "freezes" 它。基本上因为v-once就再也不会更新了

解决方法：删除v-once.

我建议您也从代码中的其他地方删除。您要更新的任何元素都不应该有 v-once.

即使数组已更改且指定了 v-key，VueJS 也不会重新呈现列表

VueJS does not rerender list even though array has changed & v-key is specified

javascript

vue.js

vuejs2

vuex

`v-once`