Question

我是Vue.js世界的新手。在我的Vue应用程序中，有一个用于产品的过滤系统。它按类别过滤产品。我使用axios从后端获取类别，并将其保存在数组中。但是，当我获取这些类别时，我还会为每个类别selected添加新属性，并为该属性提供默认值false。

  <div class="options-block">
    <div class="option"><a :class="{'active': this.isAllSelected}" @click.prevent="selectCategory(null)" href="#">Все модели</a></div>
    <div
        v-for="category in this.categories"
        :key='category.id' class="option" :id='category.id'>
      <a  :class="{'active': category.selected }"
          @click.prevent="selectCategory(category)"
          href="#">{{ category.name }}</a>
    </div>
  </div>
</template>
<script>
import { requestsMixin } from "@/mixins/requestsMixin";

export default {
  name: "Categories",
  data(){
    return({
      categories: [],
      isAllSelected: true
    })
  },
  methods: {
    selectCategory(category=null){
      if (category) {
        this.isAllSelected = false;
        this.categories.forEach(e => e.selected = category.id === e.id)
        this.$emit('categorySelected', category.id);
      } else {
        this.isAllSelected = true;
        this.categories.forEach(e => e.selected = false)
        this.$emit('categorySelected');
      }
    }
  },
  beforeMount() {
    this.getCategories().then(response => {
      this.categories = response.data;
      this.categories.forEach(category => {
        category.selected = false;
      });
    })
  },
  mixins: [requestsMixin]
}
</script>

在<template>中，有时会使用该属性为类别添加特殊的类。但是从一个类别切换到另一个类别并不能将类别从切换类别中删除。我该如何解决？这是什么原因？

Answer 1

Vue在将对象分配给data（您的selected属性）后无法检测到添加到该对象的属性的更改-请参见Change Detection Caveats

改为执行此操作：

beforeMount() {
    this.getCategories().then(response => {      
      response.data.forEach(category => {
        category.selected = false;
      });
      this.categories = response.data;
    })
  },

绑定对象属性的更改不会反映在Vue.js的UI中

1 个答案: