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

上的controller

动作，我用的是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>

如何使用 vue.js 2 添加收藏夹 - 取消收藏按钮？

How to add a Favorite - UnFavorite Button with vue.js 2?

javascript

laravel

vue.js

laravel-5.3

vuejs2