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> 

私のコンポーネントは、このようなものです：、私は（真）

location.reloadを使用して上記の私のコードで

<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

Okここでは、単純なユースケースですが、あなたのものほど複雑ではなく、使用する必要があるためvuejsを使用しています。 （http://codepen.io/simondavies/pen/MJOQEW）

OK laravel/php codeは、店舗IDを取得して、すでにお気に入りになっている場合もあります。このようにして、スクリプトは最初に店舗をチェックしてから何をすべきかを決めるのではありません。そして、Vueのコンポーネントは、そのが既に言っています（赤）か、しない（灰色）場合に表示するボタンを更新します

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

、および：何これが行うことである

はstore-idなどの成分によるis-favoritedを送信しますクリックイベントを処理し、それに応じて更新することもできます。

Laravelを使用してコンポーネントに通知していれば、あなたのチェック機能と1つ少ないhttp要求を取り除くことができます。その後、ユーザーがお気に入りボタンをクリックしたときにストアを更新するだけで済みます。

デモに表示されているように、更新するため、更新する必要はありません。

これはあなたの書き換えを助けて、あなたが望むようになることを願っています。

PS私は記録されたINがチェックアウト残っている@if (Auth::user())あなたはあなたが別の解決策は、vue-router docで説明

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

更新する必要があるか、問題になっているHTMLのニーズ、我々は可能性として良いの質問に答えるために、ここで言及されていないthatsの多くのことをtheresのと私はそれはあなたがこれを見て最善だと思う何等の

へhttps://laracasts.com/series/learn-vue-2-step-by-stepでは、Vuejsの仕組みや簡単な操作方法をよく理解しています。

あなたは詳細なストア/ vuexタイプのコーディングを使用しており、基本を理解していない場合は、あなたの答えを解くことが難しくなる可能性があります。

ごめんなさい。

Answer 3

必要なものは、vm-forceUpdateです。

強制的にVueインスタンスを再レンダリングします。すべての子コンポーネントに影響するわけではなく、インスタンス自体と、スロットの内容が挿入された子コンポーネントのみに影響することに注意してください。

私はこれを自分自身で使ってみることはありませんでしたが、プロジェクトで作業している間に出てきました。

vue forceUpdate

または

あなただけのsetTimeoutメソッド内の関数を呼び出すことができます。

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

ここでは多くのjavascriptを使用していますが、vueを使用してその作業のほとんどを行うことができます。

Answer 4

などのそれを戻すことができています。単にシステムを$routeネイティブ属性に適用して使用してください。たとえ同じコンポーネントを使用していても結果的にデータをフェッチしても、新しいルートを検出することができます。