vue.js ist nicht das DOM zu aktualisieren, nachdem das Array

Question

Aktualisierung las ich eine Liste von Elementen über AJAX und schieben Sie es in einen Daten-Array

 loadSparepartFiles: function(){ 
      var vm = this; 
      vm.activeSparepart.attachments = []; 
      ajaxApi.loadJson('spareparts/sparepart/getFiles/'+vm.activeSparepartId, function (data) { 
       for(var i = 0; i < data.files.length; i++){ 
        vm.activeSparepart.attachments.push({ 
         filename: data.files[i] 
        }); 
       } 
      }); 
     }, 

In dem VUE DevTools in Chrome i das Datenfeld aktualisiert sehen , aber die DOM-Liste ist noch leer.

Die Vorlage:

<div v-for="file in activeSparepart.attachments" class="uk-width-1-2 uk-margin-bottom"> 
<a href="{{ baseUrl }}/download/sparepart/{{ activeSparepartId }}/{{ file.filename }}" target="hidden-frame" class="block-link"> 
    <i class="delete uk-icon-remove"></i> 
    <i class="icon uk-icon-image"></i> 
    <span class="title"> 
     {{ file.filename }} 
    </span> 
</a> 

Das activeSparepart Objekt hier initialisiert:

 resetSparepart: function(){ 
      this.activeSparepart = { 
       alternates: [], 
       locations: [], 
       logs: [], 
       usages: [], 
       vendors: [], 
       sparepart: {}, 
       attachments: [] 
      }; 
      this.activeSparepartId = 'new'; 
     }, 

vue DevTools zeigen th folgende

vue devTools screen

Answer 1

Ich denke, das Problem ist, dass Ihre activeSparepart.attachments ist nicht reaktiv. Lesen Sie diese http://rc.vuejs.org/guide/reactivity.html#Change-Detection-Caveats.

Wenn activeSparepart ist ein Objekt und fügen Sie Eigenschaft attachments die Anlagen werden nicht erkannt ...

Vue nicht dynamisch neue Root-Level-reaktiven Eigenschaften auf eine bereits erstellte Instanz Hinzufügen ermöglichen. Allerdings ist es möglich, reaktive Eigenschaften zu einem verschachtelten Objekt hinzufügen, um die Vue.set mit (Objekt, Schlüssel, Wert) Methode:

Vue.set(vm.activeSparepart, 'attachments', []) 

Answer 2

Denken Sie daran, dass Sie Vue.js Komponentendaten als eine Funktion definieren, die ein ganz neues Objekt zurückgibt, um zu verhindern, dass die Daten mit anderen Komponenten geteilt wurden. Wenn Sie ein Array modifizieren möchten, müssen Sie zunächst das Ganze erhalten, Änderungen vornehmen und das Ganze wieder zurückstellen.

var list = vm.activeSparepart.attachments; 
for (var i=0; i < data.files.length; i++) { 
    list.push({ filename: data.files[i] }); 
} 
vm.activeSparepart.attachments = list;