Question

我有一个用于在收藏夹中添加/删除项目的组件。它工作得很好，但是用户看不到他/她是否将该项目添加到收藏夹中（如果该项目被收藏，则显示一个星形图标，否则显示一个空图标）。我该如何反应呢？如果用户单击图标，我希望图标更改其类。

这是我的代码：

组件：

<template>
 <span :class="isFavorite
            ? 'mdi mdi-star favorite'
            : 'mdi mdi-star-outline'"
    class="favorite-item-icon"
    @click="isFavorite ? deleteFromFavoriteItems(itemId) : addToFavoriteItems(itemId)">
 </span>
</template>

<script>
 export default {
  import { mapGetters, mapActions } from 'vuex';

  props: ['itemId', 'isFavorite'],
  methods: {
    ...mapActions(['addToFavoriteItems', 'deleteFromFavoriteItems']),
  },
};
</script>

v-for父组件列表中的组件：

...
 <favorite-label :itemId="item.id" :isFavorite="item.is_favourite" />
...

在我的商店中：

addToFavoriteItems({ commit }, itemId) {
  http
    .post(`${config.api}api/v1/items/favourite-save`, {
      item_id: itemId,
    });
deleteFromFavoriteItems({ commit }, itemId) {
  http
    .post(`${config.api}api/v1/items/favourite-delete`, {
      item_id: itemId,
    });

Answer 1

您需要将服务器上的item（更新后）分配给商店，例如：

$post(..., { item_id: itemId }).then(function(response) {
  this.$store.commit('items/SET_ITEM', response.data)
})

items/SET_ITEM突变会循环当前数组中的项目，并在id匹配的情况下更新该项目。

let itemToUpdate = this.items.forEach(function(i) {
  if (i.id === item.id) {
    i = item
  }
})

然后，它应该正确地使派发道具更新的商店发生突变，并使用新的isFavorite计算方法重新渲染视图。

或者，如果可以使用您传递的itemId，则服务器没有理由更改任何内容，只需传递它，例如：

$post(..., { item_id: itemId }).then(function() {
  this.$store.commit('items/UPDATE_FAVORITE', { item: itemId })
})

现在，您只需添加一个可以切换收藏夹的突变即可，

this.items.forEach(function(i) {
  if (i.id === item) {
      i.is_favorite = !i.is_favorite
  }
})

Vue.js：点击一次即可更新组件

1 个答案: