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

Question

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

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

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

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

1. 计算属性
2. 当用户选择一个类别时，我调用一个方法，该方法按 category_id 过滤子类别并返回新列表

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

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 setter/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 staticcontent and skipped. This can be used to optimize update performance.

也就是说，一旦 Vue 第一次呈现子类别集合，它就会“卡住”它。基本上，因为 v-once 它永远不会再更新。

解决方案:删除v-once。

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