Question

我有一堆类绑定语句：

:class="{active: isActive('status', status.id)}"

以下是上述方法：

isActive: function (param, value) {
    if (!this.activeFilters.hasOwnProperty(param) && value === 'all' && param !== 'type') {
        return true;
    }
...etc
}

...以及该方法正在查看的计算属性：

activeFilters() {
    return this.$store.state.activeFilters;
},

属于Vuex状态。

问题是，当点击具有上述类绑定的其中一个下拉列表时，这些属性不会更新。如果我导航到另一条路线然后返回，则活动类已经应用得很好。我可以强制计算属性重新计算，以便立即应用该类吗？

我知道添加属性不会触发反应性but according to this，如果我用新的替换对象，应保持反应性。那么这就是我正在做的事情：

state.activeFilters = query;

...替换对象。我很难过。

Answer 1

想出来。在我的函数之后，我需要这个来强制组件重新渲染：

this.$forceUpdate();

Answer 2

由于JavaScript的限制，Vue无法使用数组和对象检测到某些类型的更改。您可以在这里了解更多信息：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

一个简单的解决方案是根据您的计算属性创建方法：

之前：

<Grid v-for="i in items" :items="items" />

<script>
  export default Vue.extend({
    .
    .
    .
    computed: {
      items() {
        return this.storedItems
      },
    }
  }
</script>

之后：

<Grid v-for="i in items" :items="items" />

<script>
  export default Vue.extend({
    .
    .
    .
    methods: {
      items() {
        return this.storedItems
      },
    }
  }
</script>

未从Vuex商店对象更新的计算属性

2 个答案: