6

我有一堆类绑定语句：

: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 状态。

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

我知道添加属性不会触发反应性，但据此，如果我用新的对象替换对象，则应保持反应性。这就是我正在做的事情：

state.activeFilters = query;

...替换对象。我难住了。

4

2 回答 2

1

由于 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>
于 2020-11-12T15:52:52.623 回答
0

弄清楚了。在我的函数之后，我需要这个来强制组件重新渲染：

this.$forceUpdate();
于 2016-11-09T20:40:43.253 回答