Vue Js未更新DOM第一次更新數組

我能夠獲得數組中的圖像路徑，但是當我上傳圖像時，數組並沒有第一次更新。

當檢查vue devtools時，它會更新數組，但圖像不會預覽。

當我上傳圖片時，數組應該立即更新。但它不會更新。

如果我用vue devtools查看我的數組，數組確實會更新。

這裏是我的代碼：

HTML

<div class='row'> 
    <div v-for="item in itemsImages">{{item}}</div> 
</div>

腳本

export default { 

data() { 
     return { 
      items: [], 
      itemsAdded: '', 
      itemsNames: [], 
      itemsSizes: [], 
      itemsImages: [], 
      itemsTotalSize: '', 
      formData: '', 
     }, 
     methods: { 
      onChange(e) { 
      this.successMsg = ''; 
      this.errorMsg = ''; 
      this.formData = new FormData(); 
      let files = e.target.files || e.dataTransfer.files; 
      this.itemsAdded = files.length; 
      let fileSizes = 0; 
      var vm = this; 
      for (let x in files) { 
       if (!isNaN(x)) { 
        this.items = e.target.files[x] || 
        e.dataTransfer.files[x]; 
        this.itemsNames[x] = files[x].name; 
        this.itemsSizes[x] = this.bytesToSize(files[x].size); 
        fileSizes += files[x].size; 

        var reader = new FileReader(); 
        reader.onload = (event) => { 
         vm.itemsImages[x] = event.target.result; 
        }; 
        reader.readAsDataURL(files[x]); 
        this.formData.append('items[]', this.items); 

       } 
      } 
      this.itemsTotalSize = this.bytesToSize(fileSizes); 
     }, 

    }, 

}

這裏是截圖：

來源

2017-08-04 WahidSherief

[Vue.js - 更新的數組項值不會在頁面中更新]的可能重複（https://stackoverflow.com/questions/44800470/vue-js-updated-array-item-value-doesnt-update -in-page） – choasia

這通常是一個反應性問題，因爲你的數組確實更新了，但Vue沒有得到這個通知，因此不會重新渲染。

看來你想如果數組改變通知，它改變了這裏：

vm.itemsImages[x] = event.target.result;

你在這一刻設置屬性x但Vue公司絕不會拿起這個，因爲Vue公司不會產生干將併爲初始化後添加的屬性設置setter。

如果你想Vue公司能夠爲這個陣列上的變化做出反應，你需要動態設置你的屬性，你需要：

https://vuejs.org/v2/api/#Vue-set

因此，這將成爲類似：

this.$set(vm.itemsImages, x, event.target.result)

這應該可能解決您的問題。讓我知道如果它不起作用。

來源

2017-08-04 13:32:55

像魅力一樣工作！感謝您的幫助@ Stephan-v – WahidSherief

Vue Js未更新DOM第一次更新數組

回答

相關問題