Question

我的代码是这样的：

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

<script>
    export default{
        props:['idStore'],
        mounted(){
            this.checkFavoriteStore()
        }, 
        methods:{
            addFavoriteStore(event){
                var label = $('#favoriteId');
                var text = label.text();

                event.target.disabled = true
                const payload= {id_store: this.idStore}

                if(text == "Favorite") {
                    this.$store.dispatch('addFavoriteStore', payload)
                }
                else {
                    this.$store.dispatch('deleteFavoriteStore', payload)                        
                }

                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            },
            checkFavoriteStore(){
                const payload= {id_store: this.idStore}
                this.$store.dispatch('checkFavoriteStore', payload)
                // this is response. return store_id
            }
        },
        data: {
            store_id: ''
        }
    }
</script>

我按照上述条件制定条件

您可以查看方法addFavoriteStore

这一步是否正确？

如何确定它是最喜欢的标签还是不创造条件？

更新

在控制台中存在如下错误：

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

Answer 1

正如错误所说，当您处理组件时，数据应定义为返回对象的函数 - 所以：

data() {
  return {
   store_id: ''
  }
}

Answer 2

您的数据应设置为：

  data() {
     return {
       store_id: ''
     }
  }

作为其组成部分？试试这个？

如何在方法vue.js 2中添加条件？

2 个答案: