Question

我在前端有VueJS的网站构建，我想要隐藏每个被删除的项目。

我在store.js中将属性eventIsActive设置为true：

export const store =  new Vuex.Store({
  state: {
    eventIsActive: true
  }
})

在ShowItems.vue（网格版）中，我有一个删除方法，我将eventIsActive设置为false：

removeEvent() {
  this.$http.delete('/event/' + item)
  .then((response) => {
    this.$store.state.eventIsActive = false;
    this.$router.push('/events');
  })
  .catch((error) => {
    alertify.error('Error', error);
  })
}

在同一页面上，我有这个属性eventIsActive的计算方法：

computed: {
  getActiveEvent() {
    return this.$store.state.eventIsActive;
  }
}

在此页面的HTML上，我使用compute中的方法隐藏已删除的组件。

<template>
  <div class="col-6 col-lg-4"  v-if="getActiveEvent">
    <p>{{itemTitle}}</p>
    <p>{{itemSubtitle}}</p>
  </div>
</template>

问题是当我删除一个项目时，其余项目都被隐藏，而不仅仅是被删除的项目。

在我刚刚在data（）中使用一个简单的eventIsActive：true之前，在removeEvent（）中将它设置为false。更容易使用它，但因为我有ShowItems.vue（列表版本），如果我删除网格版本中的项目，列表版本仍将存在，直到我刷新页面。

有人可以帮我这个方向吗？

Answer 1

Vuex状态是一个全局状态，由应用程序中的所有组件共享。

因此，当您更改eventIsActive时，所有元素都会获得相同的状态（true / false）并相应地执行操作。

由于显示/隐藏项目与该特定项目状态相关，因此您需要为每个项目设置本地状态并仅更改它。

所以在组件的data属性中，添加一个活动标志并改为使用它：

data () {
   ....
   active: true
}
....
removeEvent() {
  this.$http.delete('/event/' + item)
  .then((response) => {
    this.active = false;
    this.$router.push('/events');
  })
  .catch((error) => {
    alertify.error('Error', error);
  })
}
....
<template>
  <div class="col-6 col-lg-4"  v-if="active">
    <p>{{itemTitle}}</p>
    <p>{{itemSubtitle}}</p>
  </div>
</template>

使用此功能删除项目时隐藏项目。$ http.delete（）

1 个答案: