Aktualisieren der DOM-mit dem Wandel in ein Objekt (vue.js) - Bindung funktioniert nicht?

Habe ich die app.js Datei, wo gmarkers ist ein array von Objekten :

var vm = new Vue({
    el: '#lili',
    data: {
        listings: gmarkers
    }
});

In meinem HTML Datei :

<div id="lili" >
    <div
        v-repeat="gmarker : listings" 
        class="listing listing-list col-sm-12" 
        style="height:50px;line-height:50px;"  
        data-cat="@{{gmarker.mycategory}}" 
        data-id="@{{gmarker.id}}"
    >
        <span style="color:black;">
            <a target="_blank" href="@{{gmarker.listlink}}">
                @{{ gmarker.listname }}
            </a>
        </span>
        <span class="tag blue-back" style="margin-left:5px;">
            <a target="_blank" href="@{{gmarker.catlink}}">
                @{{gmarker.listcat}}
            </a>
        </span>
        <span style="margin-left:20px;color:#bbb;">
            @{{gmarker.distance}}km
        </span>
    </div>
</div>

Beim laden der Seite, der DOM lädt richtig, die Anzeige der Liste ich bin auf der Suche nach, aber wenn (nachdem ein ajax-Aufruf in js) die gmarkers Objekt ändert, wird der DOM nicht geändert werden.

Die neue gmarkers ist völlig von Grund auf neu erstellt und mit neuen Objekten.

Was bin ich ?

InformationsquelleAutor PaulP | 2015-06-11
  1. 5

    Es klingen wie Sie sind falsch, welche Daten gebunden hier. Sie erwarten data: {listings: gmarkers} zu tun, die Bindung zwischen vm.listings und die gmarkers array. Dies ist nicht, was es tut. Es kopiert die gmarkers Daten in die Listen und hört nicht auf gmarkers mehr. Sehen diese Geige ein Beispiel für das, was ich denke, Sie sind falsch.

    Können wir beheben, das oben fiddle durch Einstellung der vm.listings an der new array von Objekten, die nach dem ajax-request. 

    vm.$set('listings', gmarkers);

    Können Sie dies in Aktion zu sehen in diese aktualisierte fiddle.

    Es ist eigentlich ziemlich Häufig zu sehen, eine leere listings, bis ajax zurück. Hier finden Sie einige Beispiel-code, rufen Sie eine ajax-Anfrage bei vue ist bereit und aktualisieren Sie die Liste, sobald es fertig ist. Hinweis: diese exampe verwendet vue-Ressourcen zum durchführen der ajax-request. Sie haben möglicherweise nicht diese. Sie können immer nur die jQuery-oder javascript ausführen.

    data: {
    listings: []
},
ready: function () {
  this.fetchListings();
},
methods: {
  fetchListings: function () {
    this.$http.get('/your/api/listings', function (response) {
      this.$set('listings', response);
    });
  }
}

    Diese Geige zeigt der obige code aber achten Sie auf die Unterschiede erforderlich, für die gefälschte ajax-Anfrage, die ich verwendet.

    • Ich erschuf eine Geige für Sie. Um Fragen zu stellen einfacher zu verstehen und zu beantworten würde ich vorschlagen, die Schaffung eines fiddle, wenn möglich.
    • Mann, Sie machte meinen Tag und mein Wochenende ! Danke für die info. Es war in der Tat, dass das problem und die Lösung.
    InformationsquelleAutor DutGRIFF
Schreibe einen Kommentar