如何在vue.js不刷新的情況下更新頁面數據？

Question

我的觀點是這樣的：

<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>&nbsp;Favorite
        </a>
    @endif
</div>

我的組件是這樣的：

<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 == '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>

在我上面的代碼中，我使用

位置.重新加載（真）

更新頁面上的數據。 但它重新加載頁面。

我想要更新頁面時，它不是重新加載頁面

我該怎么做？

Answer 1

好的，這是一個簡單的用例，但不如您的復雜，並且應該使用 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>

Answer 2

vue-router doc中解釋了另一種解決方案。 只需使用應用於$route本機屬性的watch系統。 即使他們使用相同的組件並因此獲取數據，您也將能夠檢測到新路由。

Answer 3

您需要的是vm-forceUpdate 。

強制 Vue 實例重新渲染。 請注意，它不會影響所有子組件，只會影響實例本身和插入插槽內容的子組件。

我自己沒有嘗試過使用它，只是在做項目時遇到它。

vue forceUpdate或者你可以在setTimeout方法中調用該函數。

setTimeout(function () {
    this.checkFavoriteStore();
}, 1500)

你在這里使用了很多 javascript，你可以使用 vue 來完成大部分工作。

Answer 4

這里沒有提到很多東西來幫助我們盡可能好地回答這個問題，它需要有問題的html，需要更新什么以及什么等等。

我認為你最好看看這個https://laracasts.com/series/learn-vue-2-step-by-step以便很好地理解 Vuejs 是如何工作的以及如何做一些簡單的事情，比如這個。

您使用深入的存儲/vuex 類型編碼，如果您不了解基礎知識，那么很難為您找到答案。

抱歉有點廢話，但是。