Vue.js: Reactively update a component on a click

Question

I have a component for adding/deleting an item to/from favorites. It works perfectly fine but a user cannot see whether he/she added the item to favorites or not (I show a star icon if the item is favorited and an empty one if not). How can I do this reactively? I want my icon to change its class if the user clicked on it.

Here is my code:

Component:

<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>

The component in v-for list of a parent component:

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

In my store:

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,
    });

Ohgodwhy · Accepted Answer · 2018-12-03 09:25:44Z

1

You would need to assign the item from the server (after update) to the store, something like:

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

Where the items/SET_ITEM mutation loops the items in the current array and updates the item if the id matches.

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

Then it should correctly mutate the store dispatching the prop update and causing the view to re-render with the new isFavorite calculation in place.

Alternatively, if the itemId that you're passing can be used, there's no reason for the server to change anything, just pass it along instead, like:

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

And now you could just add a mutation that toggles the favorite, basically:

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

answered Dec 3, 2018 at 9:25

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Olga B Over a year ago

Thank you very much for your suggested solution. Unfortunately, it is still working as it did before. My icon doesn't change itself reactively, only after refresh. Is it possible to add some kind of a watcher?

Olga B Over a year ago

Okay, I fixed this problem and now my icon updates itself reactively. However, this happens quite slow (approx. 2 sec). Is this any way to toggle icons faster? I think it is toggled as soon as my request gets the response and either add or remove item from favorites. But for UX this behaviour is a little bit slow... :(

Ohgodwhy Over a year ago

@OlgaB You can perform the commit BEFORE the post request and use .catch(error) to roll it back if there's a problem

Collectives™ on Stack Overflow

Vue.js: Reactively update a component on a click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related