Vue.js绑定对象属性变更未同步UI问题的排查与解决

我来帮你搞定这个分类筛选的active类不更新的问题～

问题根源 #

你遇到的核心问题是Vue 2的响应式追踪限制：在beforeMount钩子中，你直接给从后端获取的category对象新增了selected属性，但Vue 2默认只会对初始化时（也就是data里定义的）对象属性做响应式监听。后续手动新增的属性如果不通过特定方式处理，Vue无法感知到它的变化，所以当你在selectCategory方法里修改selected值时，视图不会同步更新，导致上一个分类的active类无法被移除。

修复方法 #

这里有两种简单有效的修复方式，任选其一即可：

方法1：使用this.$set添加响应式属性 #

通过Vue提供的this.$set方法，为每个分类对象新增selected属性，确保它被Vue的响应式系统追踪：

beforeMount() {
  this.getCategories().then(response => {
    this.categories = response.data;
    this.categories.forEach(category => {
      // 用this.$set确保属性是响应式的
      this.$set(category, 'selected', false);
    });
  })
},

方法2：映射数组创建带selected属性的新对象（推荐） #

在获取后端数据后，通过数组map方法为每个分类创建包含selected属性的新对象，这种方式更直观，也能让Vue自动识别所有属性的响应性：

beforeMount() {
  this.getCategories().then(response => {
    this.categories = response.data.map(category => ({
      ...category, // 展开原分类的所有属性
      selected: false // 添加默认的selected属性
    }));
  })
},

验证你的逻辑 #

其实你selectCategory方法里的逻辑是完全正确的：点击单个分类时，会把所有分类的selected设为false，仅当前点击的分类设为true；点击“Все модели”时，会把所有分类的selected重置为false。只要selected属性变成响应式的，视图就会自动更新，active类也能正确切换啦～

内容的提问来源于stack exchange，提问作者n0th1ng