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

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

我想更新页面时，不是重新加载页面

我该怎么做？

Answer 1

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

我认为你最好看看这个 https://laracasts.com/series/learn-vue-2-step-by-step 以便更好地理解 Vuejs 的工作原理以及如何做简单的事情，比如这个。

您使用 in-depth store/vuex 类型编码，如果您不了解基础知识，那么可能很难为您找出答案。

抱歉有点废话但是。

Answer 2

你需要的是vm-forceUpdate.

Force the Vue instance to re-render. Note it does not affect all child components, only the instance itself and child components with inserted slot content.

我自己没有尝试过使用它，只是在做项目时遇到它。

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 组件将更新按钮以显示它是否已经喜欢（红色）或不喜欢（灰色），然后还处理点击事件并进行相应更新。

当您使用 Laravel 告诉组件它是否已被收藏时，您可以去掉检查功能并减少一个 http 请求。然后你只需要在用户点击收藏按钮时更新商店。

并且在演示中看到它会更新，无需刷新。

我希望这对您 re-write 有帮助，这样您就可以得到想要的东西。

PS 我遗漏了登录检查 @if (Auth::user()) 所以你可以把它放回 etc

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

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

如何在不刷新 vue.js 的情况下更新页面上的数据？

How to update data on a page without refreshing on the vue.js?

javascript

vue.js

laravel-5.3

vuejs2