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

Posted 2023-02-22

【中文标题】如何在不刷新 vue.js 的情况下更新页面上的数据？

【英文标题】：How to update data on a page without refreshing on the vue.js?

【发布时间】：2017-06-13 18:03:11

【问题描述】：

我的看法是这样的：

<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)

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

我想要更新页面时，它不会重新加载页面

我该怎么做？

【问题讨论】：

您能否添加相关的html代码以便我们解决这个问题，您需要在VUE中查找绑定。还要说明您尝试更新的内容，以便我们也可以为您解决此问题。您不要刷新页面添加绑定变量，因此更新脚本中的 var 也会更新变量/html。

不是问题，但您能否解释一下您想要更新的内容，如用户执行此操作，然后执行此操作，然后我想执行此操作，说明过程和需要做什么发生了，你使用很多普通的 js 和 vue 可以代替你处理这个

【参考方案1】：

这里没有提到很多东西来帮助我们尽可能好地回答这个问题，它需要有问题的 html，需要更新什么以及什么等等。

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

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

对不起，有点废话。

【讨论】：

我相信你需要重写我之前在另一个帖子上显示的过程，这样你就可以正确实现 vuejs 过程，将尝试再次发布 EG，但更多的解释

【参考方案2】：

您需要的是 vm-forceUpdate。

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

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

vue forceUpdate 或者你可以在setTimeout 方法中调用函数。

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

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

【讨论】：

这里的问题是他没有使用 vue js 绑定等，所以强制更新等是没有意义的，因为它的更新什么都没有。

【参考方案3】：

好的，这是一个简单的用例，但不如您的复杂，并且应该使用 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>

【参考方案4】：

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