Vue Jsが更新された配列で初めてDOMを更新しない

Question

画像をアップロードするときに画像プレビューを作成したいと思います。

イメージのパスを配列で取得できましたが、イメージをアップロードするときに配列が最初に更新されません。

vue devtoolsをチェックすると、アレイが更新されますが、イメージはプレビューされません。

イメージをアップロードすると、アレイはすぐに更新されます。しかしそれは更新されません。

私のアレイをvue devtoolsで表示すると、アレイは更新されます。ここで

は私のコードは次のとおりです。ここ

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

    }, 

} 

HTML

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

スクリプトはスクリーンショットです：

Answer 1

これは通常、配列が更​​新されますが、Vueに通知されないため再描画されないため、反応性の問題です。

あなたの配列が変化した場合に通知するようだと、それはここで変更されます。

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

あなたはこの時点でプロパティxを設定しているが、Vueのはゲッターを作成していないため、Vueのは、この上で拾うことはありません初期化後に追加するプロパティの設定を行います。

あなたはVueのは、このアレイ上の変化に対応できるようにしたいとあなたが動的にプロパティを設定する必要がある場合は、あなたが必要とする：

：

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

だから、これは次のようになりますthis.$set(vm.itemsImages, x, event.target.result)

これで問題が解決するはずです。それが動作しない場合は教えてください。