如何在不刷新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>

在上面的代码中，我使用

location.reload（真）

更新页面上的数据。 但它会重新加载页面。

我要在更新页面时不重新加载页面

我该怎么做？

Answer 1

vue-router doc中介绍了另一种解决方案。 只需使用应用于$route本机属性的watch系统即可。 即使它们使用相同的组件并获取数据，您也将能够检测到新路由。

Answer 2

您需要的是vm-forceUpdate 。

强制重新渲染Vue实例。 请注意，它不会影响所有子组件，只会影响实例本身和插入了插槽内容的子组件。

我没有尝试过自己使用它，只是在从事项目时碰到了它。

可以使用forceUpdate或通过setTimeout方法调用该函数。

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

您在这里使用了大量的javascript，您可以在其中使用vue进行大部分工作。

Answer 3

好的，这是一个简单的用例，但不像您那样复杂，应使用vuejs。 （ http://codepen.io/simondavies/pen/MJOQEW ）

OK，让laravel / php代码获取商店ID以及是否已被收藏。 这样，您的脚本不会先检查商店然后决定要做什么。

这样做是通过以下组件发送store-id和is-favorited ：

 <favorite :store-id="{{$store->id}}" :is-favorited="{{$store->isFavorited}}"></favorite>

然后，Vue组件将更新按钮以显示按钮是否已被喜欢（红色）（不喜欢）（灰色），然后还处理click事件并进行相应的更新。

当您使用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 4

这里有很多未提及的内容可以帮助我们尽可能地回答问题，它需要有问题的html，需要更新的内容以及要更新的内容等。

我认为最好是看一下https://laracasts.com/series/learn-vue-2-step-by-by-step ，以更好地了解Vuejs的工作原理以及诸如此类的简单操作。

您使用了深入的store / vuex类型编码，如果您不了解基础知识，那么可能很难为您找到答案。

很抱歉，但是。