以下サンプルコードのような形で
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]);
}
}
}
});