My code is like this :
<template>
<a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteStore($event)">
<span class="fa fa-heart"></span> <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>
I make the conditions as described above
You can look at the method addFavoriteStore
Whether that step is correct?
And how to determine it was favorite label or not to create conditions?
UPDATE
In console exist error like this :
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
As error says, when you are dealing with the components, data should be defined as function that return an object - so:
data() {
return {
store_id: ''
}
}
your data should be set as:
data() {
return {
store_id: ''
}
}
As its a component? Try this?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.