Updating components reactively in Vue.js when a click event occurs

Question

Updating components reactively in Vue.js when a click event occurs

I have a dilemma with my component that allows users to add or remove an item from their favorites. While the functionality works smoothly, there is no visual indication for the user to know whether the item has been added to favorites or not. Currently, I display a filled star icon if the item is favorited and an empty one if it is not. How can I make this interaction reactive? I want the icon to change its appearance when clicked on by the user.

Below is a snippet of 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 within a v-for loop list in the parent component:

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

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

javascript vue.js reactive-programming

Answer 1

Answer №1

To update the store with the new item from the server, you can do something like this:

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

The items/SET_ITEM mutation will iterate through the items in the current array and update the item if the id matches.

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

This will then mutate the store correctly, triggering a re-render of the view with the updated isFavorite calculation in place.

Alternatively, if the itemId being passed does not require any changes from the server, you can simply pass it along like this:

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

Then, you just need to add a mutation that toggles the favorite status:

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

Answer 2

To update the store with the new item from the server, you can do something like this:

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

The items/SET_ITEM mutation will iterate through the items in the current array and update the item if the id matches.

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

This will then mutate the store correctly, triggering a re-render of the view with the updated isFavorite calculation in place.

Alternatively, if the itemId being passed does not require any changes from the server, you can simply pass it along like this:

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

Then, you just need to add a mutation that toggles the favorite status:

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

Updating components reactively in Vue.js when a click event occurs

Answer №1

Similar questions

Interacting Shadows with BufferGeometry in react-three-fiber

What is the best way to eliminate the content of an element using javascript/typescript?

Troubleshooting: 404 Error When Trying to Send Email with AJAX in Wordpress

Exploring touch interactions using D3.js and TUIO

Is there a reason behind why this functionality is only applicable to a class component and not a functional one?

At what point is it necessary to generate a new vertex array object when sketching numerous objects?

When executing the app.delete function, the req.body is found to be empty

Issues with the functionality of jQuery event functions

Is it possible to launch a React application with a specific Redux state preloaded?

Issue with jQuery 'on' event not triggering following 'load' event

React Jodit Editor experiencing focus loss with onchange event and useMemo functionality not functioning properly

Exploring the world of jQuery and Ajax: Experimenting with implementing a POST method through Ajax and retrieving the response in HTML

The standard outcome when searching in the v-data-table

Having trouble getting my subarrays to push correctly into the parent array in ReactJS. What am I doing wrong

Access a JSON response within an HTML/JavaScript document

What is the best way to transform a JSON object from a remote source into an Array using JavaScript?

Is there a way to determine if a click occurred outside of a div without relying on stopPropagation and target event?

I'm facing issues with Angular commands not functioning properly even after installing the Angular CLI and configuring the

Loading the Facebook JavaScript SDK asynchronously using React and Redux

Whenever text is present, the sides of my box model, constructed using HTML5 and CSS3, are always pushed downward