`v-once`

Question

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

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

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

我尝试了下一步计算子类别：

计算属性
当用户选择一个类别时，我会调用一个方法，该方法按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
},

当用户选择一个类别时。

我指定：密钥，尝试了不同的方法但没有任何效果，我总是得到旧的子类别列表。

可能是什么原因？

更新

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

<强>详细信息：

仅渲染元素和组件一次。在随后的重新渲染中，   元素/组件及其所有子元素将被视为静态元素   内容和跳过。这可用于优化更新性能。

也就是说，只要Vue第一次渲染子类别集合，它就会冻结＆＃34;它。基本上，由于v-once，它永远不会再次更新。

解决方案：删除v-once。

我建议您从代码中的其他位置删除。您要更新的任何元素都不应包含v-once。

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

1 个答案:

`v-once`