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

当单击按钮收藏夹时，我想将其更改为不喜欢的按钮。反之亦然。

我一直在寻找参考资料。但我还没有找到它。我是 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>