如何使用 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>