vue.js更新所述陣列

後不更新所述DOM我通過AJAX讀項目的列表並將它推入一個數據陣列vue.js更新所述陣列

 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

來源

2016-09-30 user6905325

提供的jsfiddle，因爲它是不可能知道你在模板 –

在做什麼，我增加了模板的問題。 – user6905325

組件中定義的activeSparepart如何？ –

我認爲問題在於您的activeSparepart.attachments沒有反應。閱讀http://rc.vuejs.org/guide/reactivity.html#Change-Detection-Caveats。

如果activeSparepart是一個對象，你加屬性attachments，附件將不被認可......

Vue公司不會動態允許添加新的根級別的反應特性，以一個已經創建的實例。然而，這是可能的反應特性添加到使用Vue.set（對象鍵，值）方法嵌套對象：

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

來源

2016-09-30 15:39:00

完美！非常感謝！+1 – user6905325

請記住，您將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;

來源

2016-09-30 15:27:23 minagawah

'array.push（）'將檢測到更改並提供反應性 –

仍然是相同的結果:( – user6905325

gee ...對不起我的壞 – minagawah

vue.js更新所述陣列

回答

相關問題