Wie aktualisiert man Daten auf einer Seite, ohne die vue.js zu aktualisieren?

Meine Ansicht ist, wie folgt aus:Wie aktualisiert man Daten auf einer Seite, ohne die vue.js zu aktualisieren?

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

Meine Komponente ist wie folgt:

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

Auf der meinen Code oben, ich

location.reload (true) mit

, um Daten auf der Seite zu aktualisieren. Aber es lädt die Seite neu.

ich will, wenn Aktualisierung der Seite, es ist nicht die Seite neu laden

Wie kann ich es tun?

Quelle

2017-01-27 moses toh

können Sie den HTML-Code hinzufügen, der relevant ist, damit wir das ausarbeiten können, müssen Sie nach Bindung in VUE suchen. Erklären Sie auch, was Sie zu aktualisieren versuchen, damit wir das auch für Sie erledigen können. Sie aktualisieren nicht die Seite, der Sie verbindliche Variablen hinzufügen, so aktualisiert ein var im Skript auch die Variable/html. –

kein Problem, aber können Sie auch erklären, was Sie aktualisieren möchten, wenn der Benutzer dies tut, dann tut dies, und ich möchte dies tun, erklären Sie den Prozess und was passieren muss, verwenden Sie eine Menge normale js und vue können dies für Sie statt –

Ok Hier ist ein einfacher Anwendungsfall, aber weniger kompliziert als deins und die Verwendung von Vuejs, wie es verwendet werden sollte. (http://codepen.io/simondavies/pen/MJOQEW)

OK lassen laravel/php Code die Speicheridentifikation erhalten, sowie wenn es bereits bevorzugt wurde. Auf diese Weise prüft Ihr Skript nicht zuerst den Store, um dann zu entscheiden, was zu tun ist.

Was das bedeutet ist, sendet die store-id und die is-favorited durch die Komponente wie:

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

Dann wird die Vue-Komponente wird die Schaltfläche aktualisieren, um anzuzeigen, wenn seine bereits gefallen (rot) oder nicht (grau), und Behandeln Sie dann auch das Click-Ereignis und aktualisieren Sie es entsprechend.

Da Sie Laravel verwenden, um der Komponente mitzuteilen, ob sie bereits bevorzugt ist, können Sie Ihre Prüffunktion und eine weitere HTTP-Anfrage loswerden. Dann müssen Sie den Store nur aktualisieren, wenn der Benutzer auf die Favoritentaste klickt.

Und wie in der Demo zu sehen, es aktualisiert, keine Notwendigkeit, zu aktualisieren.

Ich hoffe, dass diese Ihnen helfen, Ihre zu überschreiben, damit Sie bekommen, was Sie wollen.

PS Ich habe die eingeloggte @if (Auth::user()) Sie überprüfen links, so dass Sie, dass in etc setzen

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>

Quelle

2017-01-28 14:43:36

Theres viel das ist nicht hier erwähnt, die Frage so gut wie wir konnten, um zu beantworten, die html in Frage seine Bedürfnisse, was aktualisieren müssen und zu dem, was usw.

Ich denke, es ist am besten, Sie aussehen https://laracasts.com/series/learn-vue-2-step-by-step für ein gutes Verständnis dafür, wie Vuejs funktioniert und wie man einfache Dinge wie das macht.

Verwenden Sie eingehende Store/Vuex-Typ-Codierung und wenn Sie nicht die Grundlagen verstehen, dann kann es schwierig werden, die Antwort für Sie zu erarbeiten.

Sorry, ein bisschen blah aber sein.

Quelle

2017-01-27 23:44:32

ich glaube, Sie müssen den Prozess neu schreiben, wie ich zuvor auf einem anderen Beitrag angezeigt, so können Sie den VUEJS-Prozess ordnungsgemäß implementieren, wird versuchen und die EG wieder mit einer aber mehr explination –

Was Sie brauchen, ist vm-forceUpdate.

Erzwingen Sie, dass die Vue-Instanz erneut gerendert wird. Beachten Sie, dass dies nicht alle untergeordneten Komponenten betrifft, sondern nur die Instanz selbst und untergeordnete Komponenten mit eingefügtem Steckplatzinhalt.

Ich habe nicht versucht, dies selbst zu verwenden, stieß nur auf es während der Arbeit an einem Projekt.

vue forceUpdate

oder

Sie könnten nur die Funktion in der setTimeout Methode aufrufen.

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

Sie verwenden eine Menge Javascript hier, können Sie vue verwenden, um die meiste Arbeit dort zu erledigen.

Quelle

2017-01-28 00:22:30

Das Problem hier ist, er verwendet nicht Vue Js Bindings usw. Erzwingen so etwas zu aktualisieren usw. ist sinnlos wie seine Aktualisierung zu nichts. –

Eine andere Lösung in vue-router doc erläutert. Verwenden Sie einfach das System watch, das auf das native Attribut $route angewendet wurde. Sie können neue Routen selbst dann erkennen, wenn sie die gleiche Komponente verwenden und die Daten in der Folge abrufen.

Quelle

2017-02-20 10:13:46

Wie aktualisiert man Daten auf einer Seite, ohne die vue.js zu aktualisieren?

Antwort

Verwandte Themen