Vue の List rendering を Async させるのに躓いた件

updated: 2019/1/21

jimp で加工した list 表示でうまく表示タイミングが調整出来なくて加工前や表示自体されなくて躓いた

理由）

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

1. When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
2. When you modify the length of the array, e.g. vm.items.length = newLength

For example:

var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // is NOT reactive vm.items.length = 2 // is NOT reactive

解）Vue.set() を使う

To overcome caveat 1, both of the following will accomplish the same as vm.items[indexOfItem] = newValue, but will also trigger state updates in the reactivity system:

// Vue.set Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)

You can also use the vm.$set instance method, which is an alias for the global Vue.set:

vm.$set(vm.items, indexOfItem, newValue)

参照：

vuejs.org

update:

Vue.set() を使わなくても v-for に :key を付加させれば`dynamic にlist 表示することができた