My view is like this :
<div class=favorite style=margin-bottom:5px;>
@if (Auth::user())
<add-favorite-store :id-store={{ $store->id }}></add-favorite-store>
@else
<a href=javascript: class=btn btn-block btn-success>
<span class=fa fa-heart></span> Favorite
</a>
@endif
</div>
My component 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 == 'responseFound' ? '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}
var data = this.$store.dispatch('checkFavoriteStore', payload)
data.then((res) => this.store_id = res)
}
},
data() {
return {
store_id: ''
}
}
}
</script>
On the my code above, I using
location.reload(true)
to update data on the page. But it's reload the page.
I want when update the page, it's not reload the page
How can I do it?