[Vuejs]-Hide an item when is deleted with this.$http.delete()

by

0👍

Vuex state is a global state that is shared by all components in the app.

So when you change eventIsActive all elements get the same state (true/false) and act accordingly.

Since showing/hiding an item is related to that specific item state, you need to have a local state for each item and change only it.

so in the data attribute of the component, add an active flag and use it instead:

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>

Leave a comment