Как добавить любимую - UnFavorite Button с vue.js 2?

Question

мой взгляд, как это:

<div class="panel panel-default panel-store-info"> 
    ... 
    <div class="favorite"> 
     <add-favorite-store :id-store="{{ $store->id }}"></add-favorite-store> 
    </div> 
    .... 
</div> 

Мой компонент, как это:

<template> 
    <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteStore($event)"> 
     <span class="fa fa-heart"></span>&nbsp;Favorite 
    </a> 
</template> 

<script> 
    export default{ 
     props:['idStore'], 
     methods:{ 
      addFavoriteStore(event){ 
       event.target.disabled = true 
       const payload= {id_store: this.idStore} 
       this.$store.dispatch('addFavoriteStore', payload) 
       setTimeout(function() { 
        location.reload(true) 
       }, 1500); 
      } 
     } 
    } 
</script> 

Когда нажатие кнопки любимый, он будет вызывать контроллер на Laravel

Акция, я с помощью vuex магазин

Если вы нажмете кнопку «Избранное», я хочу изменить ее как непринужденную. Наоборот.

Я искал ссылки. Но я этого не нашел. Я был новеньким в vue.js

Так что я просил вашей помощи.

Есть ли кто-нибудь, кто может мне помочь?

Answer 1

Если вы просто ищете изменения текста в кнопке, вы можете сохранить текст на кнопке в переменной и изменить эту переменную при нажатии на кнопку, как следующее:

<template> 
    <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteStore($event)"> 
     <span class="fa fa-heart"></span>&nbsp;{{idStore ? 'Unfavorite' : 'Favorite'}} 
    </a> 
</template> 

<script> 
    export default{ 
     props:['idStore'], 
     data() { 
     } 
     methods:{ 
      addFavoriteStore(event){ 
       event.target.disabled = true 
       const payload= {id_store: this.idStore} 
       this.$store.dispatch('addFavoriteStore', payload) 
       setTimeout(function() { 
        location.reload(true) 
       }, 1500); 
      } 
     } 
    } 
</script>