我的观点是这样的:
<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>
我的组件是这样的:
<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>
在上面的代码中,我使用了
location.reload(true)
更新页面上的数据。但它重新加载页面。
我希望在更新页面时,不重新加载页面
我该怎么做?
最佳答案
好的,这是一个简单的用例,但不像你的那么复杂,并且使用 vuejs ,因为它应该被使用。 (http://codepen.io/simondavies/pen/MJOQEW)
好的,让 laravel/php 代码获取商店 ID 以及它是否已被收藏。这样您的脚本就不会先检查商店然后决定要做什么。
它的作用是通过组件发送 store-id
和 is-favorited
,如下所示:
<favorite :store-id="{{$store->id}}" :is-favorited="{{$store->isFavorited}}"></favorite>
然后,Vue 组件将更新按钮以显示是否已经喜欢(红色)或不喜欢(灰色),然后还处理单击事件并进行相应更新。
当您使用 Laravel 告诉组件它是否已被收藏时,您可以摆脱检查功能并减少一个 http 请求。然后,您只需要在用户单击收藏夹按钮时更新商店即可。
正如演示中所示,它会更新,无需刷新。
我希望这可以帮助您重写您的代码,以便您得到您想要的东西。
PS 我遗漏了您的登录检查@if (Auth::user())
,以便您可以将其放回等
Vue.component('favorite', {
template: '<button type="button" @click.prevent="updateFaviteOption" :class="{ \'is-favorited\': isFavorited }"><span class="fa fa-heart"></span></button>',
props: [
'storeId',
'isFavorited'
],
data: function() {
return {}
},
methods: {
updateFaviteOption: function() {
this.isFavorited = !this.isFavorited;
///-- DO YOU AJAX HERE i use axios
///-- so you can updte the store the the this.isFavorited
}
}
});
new Vue({
el: '#app',
});
.favorite-wrapper {
margin: 20px auto;
padding: 0;
text-align: center;
width: 500px;
height: 100px;
}
a:link,
a:active,
a:visited {
text-decoration: none;
text-transform: uppercase;
color: #444;
transition: color 800ms;
font-size: 18px;
}
a:hover,
a:hover:visited {
color: purple;
}
button {
margin: 10px auto;
padding: 8px 10px;
background: transparent;
width: auto;
color: white;
text-transform: uppercase;
transition: color 800ms;
border-radius: 4px;
border: none;
outline: none;
}
button:hover {
cursor: pointer;
color: #058A29;
}
.fa {
color: #d9d9d9;
font-size: 20px;
transition: color 400ms, transform 400ms;
opacity: 1;
}
.is-favorited .fa {
opacity: 1;
color: red;
transform: scale(1.4);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" />
<div id="app">
<div class="favorite-wrapper">
<favorite :store-id="3" :is-favorited="true">
</favorite>
</div>
</div>
关于javascript - 如何在不刷新vue.js的情况下更新页面上的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41904428/