Vue.js 强制计算属性重新计算？

Question

这是我的组件的计算属性:

methods: {
  addFavoritePlace(place_id) {
    axios.post('/api/add-favorite-place', { place_id: place_id })
      .then(response => {
        // I need here force command.
      });
  },
},

computed: {
  filteredPlaces: function () {
    var is_open;

    if (this.showOpened) {
      is_open = 'open'
    } else {
      is_open = 'close'
    }

    return this.singlePlaces.filter((j) => {
        return j.name.toLowerCase().match(this.search.toLowerCase();
    });
  }
}

还有我的标记:

<span @click="addFavoritePlace(place.id)" class="favorite-btn active" v-if="place.is_favorited == true">
  <i class="icon-heart"></i>
</span>

<span @click="addFavoritePlace(place.id)" class="favorite-btn" v-else>
  <i class="icon-heart"></i>
</span>

我需要再次调用计算内部的过滤函数。
激活收藏夹按钮。

Answer 1

无需强制更新计算值。如果所需的值发生更改，则计算属性将始终自动重新计算。
因此，就您而言，您需要更改 singlePlaces和 filteredPlaces会自动更新。
如文档( https://vuejs.org/v2/guide/reactivity.html#For-Arrays )中所示，有一点需要注意 Array 和 Object react 性。
在您的示例中，您在添加最喜欢的地点时没有包含代码，但您可能需要执行以下操作:

Vue.set(this.singlePlaces, indexOfItem, updatedItem)