vue.js не обновляя DOM после обновления массива

Question

я прочитал список элементов с помощью AJAX и толкать его в массив данных

 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] 
        }); 
       } 
      }); 
     }, 

В тех VUE Devtools в Chrome я могу увидеть обновленный массив данных , но список DOM по-прежнему пуст.

Шаблон:

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

activeSparepart Объект инициализируется здесь:

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

Vue Devtools показать й следующий

vue devTools screen

Answer 1

Я думаю, что проблема в том, что ваш activeSparepart.attachments не реагирует. Прочтите это http://rc.vuejs.org/guide/reactivity.html#Change-Detection-Caveats.

Если activeSparepart является объектом и добавить свойство attachments вложение не будет признано ...

Vue не позволяют динамически добавлять реактивные свойства нового корневого уровня к уже созданному экземпляру. Тем не менее, можно добавить реактивные свойства вложенного объекта с помощью Vue.set (объект, ключ, значение) метод:

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

Answer 2

Помните, что вы определяете данные компонента Vue.js как функцию , возвращая совершенно новый объект, чтобы предотвратить совместное использование данных другими компонентами. Если вы хотите изменить массив, вам нужно сначала получить все, внести изменения и снова вернуть все это.

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