Delete and hide an item, from an item list, in VueJS

[sorin21us]

I have website build with VueJS on frontend and I want to hide each item that is deleted.

I have in store.js a property eventIsActive set to true:

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

In a ShowItems.vue(grid version) I have a the delete method where I set the eventIsActive to false:

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

On the same page I have the computed method for this property eventIsActive:

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

On the HTML for this page I use the method from computed to hide the deleted component.

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

The problem is that when I delete an item, the rest of items are hidden, not only the one that is deleted.

Before I just used a simple eventIsActive: true in data() and set it to false in the removeEvent(). Was easier to use it, but because I have ShowItems.vue(list version), too, if I delete an Item in grid version, in the list version will still be there, until I refresh the page.

Can someone help me in this direction?

[sorin21us]

Never mind, someone else helped me. I saw that nobody from here has no idea how to help me so I asked on other place.

"Come back to your first try, without Vuex.

In your case you need to reload the page to hide that item in the other page version. I recommend you to use splice to be sure that the item is deleted.

You can replace the eventsList with you array.

Please try this code, declaring the eventIsActive in the data():"

removeEvent(item) {
  this.$http.delete('/event/' + item)
  .then((response) => {
    let idx = this.eventsList.findIndex((item) => {
      return item.rid === this.event.rid
    })
    this.eventIsActive = false;
    this.eventsList.splice(idx,1);
    setTimeout(() => {
      window.location.reload();
    }, 1000);
  })
  .catch((error) => {
    alertify.error('The event can not be deleted', error);
  })
}

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

[fretburner]

Hey @sorin21us,

@sorin21us

nobody from here has no idea how to help me

I wouldn’t jump to conclusions… there are a lot of knowledgeable people that hang around here, but we also have lives and day jobs (and sometimes just miss threads)

---

The problem with your code seems to be that you’re setting a single property in your store (eventIsActive) and using that to determine whether to show or hide each event, but there is nothing there identifying which event and so as soon as the property is set to false all events are hidden.

The non-vuex example you were given is on the right lines, but it’s obviously actually removing events from the eventsList rather than just hiding them, which wasn’t what you originally asked. It’s also reloading the page after a timeout, which should be completely unnecessary, as Vue should automatically rerender the list once events are removed from the list.

If you wanted to do this with Vuex, you’d need to move your logic that removes an event from the list into a store mutation, and the Ajax code into an action that then dispatches that mutation once the request has completed. The component itself would then no nothing of how the list is mutated or the changes are persisted to the server - it just dispatches the action.