Vue.js: реактивное обновление компонента по щелчку - PullRequest
Новая
       9

Vue.js: реактивное обновление компонента по щелчку

0 голосов
/ 03 декабря 2018

У меня есть компонент для добавления / удаления элемента в избранное.Он отлично работает, но пользователь не может видеть, добавил ли он элемент в избранное или нет (я показываю значок звездочки, если элемент добавлен в избранное, и пустой значок, если нет).Как я могу сделать это реактивно?Я хочу, чтобы мой значок изменил свой класс, если пользователь щелкнул по нему.

Вот мой код:

Компонент: 

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

Компонент в списке v-forродительского компонента: 

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

В моем магазине: 

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

1 Ответ

0 голосов
/ 03 декабря 2018

Вам нужно будет присвоить item с сервера (после обновления) хранилищу, что-то вроде: 

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

Где мутация items/SET_ITEM зацикливает элементы в текущем массиве и обновляетэлемент, если id соответствует. 

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

Тогда он должен корректно мутировать хранилище, отправляя обновление реквизита и вызывая повторный рендеринг вида с новым расчетом isFavorite.

В качестве альтернативы, если передаваемый вами itemId может быть использован, у сервера нет оснований что-либо менять, просто вместо этого передайте его, например: 

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

И теперь вы можетепросто добавьте мутацию, которая переключает любимую, в основном: 

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