配列の unshift でのデータ操作とDOM再読込に関しての質問

日本語
#1

以下サンプルコードのような形で
data 中の配列に対して unshift で配列に追加操作を行った場合に、
Chromeのデベロッパーツールを見ている限り、
全体の画像が再読込されており、DOMが再生成されているように見えるのですが、
こういったケースで、追加した分のみの画像読み込みとなる方法はないのでしょうか？

サンプルコード

<div class="images">

  <button @click="append">追加</button><br>

  <div v-for="url in image_url_list">
    <img :src="url" style="width:300px;">
    <hr>
  </div>

</div>

–

let vue_obj = new Vue({
  el: ".images",
  data: {
    image_url_list: [
      "http://illustrain.com/img/work/2016/illustrain01-moji10.png",
      "http://illustrain.com/img/work/2016/illustrain01-moji01.png",
      "http://illustrain.com/img/work/2016/illustrain01-moji02.png",
      "http://illustrain.com/img/work/2016/illustrain01-moji03.png",
      "http://illustrain.com/img/work/2016/illustrain01-moji04.png",
      "http://illustrain.com/img/work/2016/illustrain01-moji05.png",
      "http://illustrain.com/img/work/2016/illustrain01-moji06.png",
    ]
  },
  methods:{
    append(){
      let tmp_image_ulr_list = [
        "http://illustrain.com/img/work/2016/illustrain01-moji07.png",
        "http://illustrain.com/img/work/2016/illustrain01-moji08.png",
        "http://illustrain.com/img/work/2016/illustrain01-moji09.png",
      ];
      for(let i = 0; i < tmp_image_ulr_list.length; i++){
        this.image_url_list.unshift(tmp_image_ulr_list[i]);
      }
    }
  }
});
#2

<div v-for="url in image_url_list" :key="url">とした場合はどうでしょうか？

1 Like
#3

ご指摘の内容で改善されたことが確認できました。
スタイルガイド(https://jp.vuejs.org/v2/style-guide/) を読めておりませんでした、もうしわけない。
その点再読のうえ、再学習致します。

ありがとうございました。

1 Like