如何在不刷新vue.js的情况下更新页面上的数据？ [英] How to update data on a page without refreshing on the vue.js?

问题描述

我的观点是这样的：

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

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

On the my code above, I using

location.reload（true）

location.reload(true)

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

to update data on the page. But it's reload the page.

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

I want when update the page, it's not reload the page

我该怎么办？

推荐答案

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

Ok Here is a simple use case but less complicated as yours and using vuejs as it should be used. (http://codepen.io/simondavies/pen/MJOQEW)

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

OK let laravel/php code get the store ID as well as if its already been favorited. This way your script is not first checking the store to then decide what to do.

这样做是为了发送 store-id 和被收藏通过以下组件：

What this does is sends the store-id and the is-favorited through the component like:

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

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

Then the Vue component will update the button to display if its already liked (red) or not (grey), and then also handle the click event and update accordingly as well.

当你使用Laravel告诉组件它是否已被收藏时你可以摆脱你的检查功能和一个较少的http请求。然后，您只需在用户单击收藏夹按钮时更新商店。

As you are using Laravel to tell the component if it's already favorited you can get rid of your checking function and one less http request. Then you only need to then update the store when the user clicks the favourite button.

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

And as seen in the demo it updates, no need to refresh.

我希望这能帮到你 - 写你的，所以你得到你想要的。

I hope this help you re-write yours so you get waht you want.

PS我遗漏了Logged IN检查 @if（Auth :: user（）） 你有这样你可以把它放回等等

PS i have left out the Logged IN check @if (Auth::user()) you have so you can put that back in 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>

这篇关于如何在不刷新vue.js的情况下更新页面上的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！