vue@2.6.11
Example
computed: {
items() {
this.$store.state.items
}
}
itemsは{name: "ITEM_NAME", quantity: 0}の複数配列とする。
<v-for item in items :key=item.key>
{{ item.name }}
<v-btn @click="item.quantity++"></>
</>
>>>>>
computedは基本的にgetterとして使用するのでボタンを押してもquantityの値を変化させられない。
setterを定義することもできるがlist renderingを使用していると面倒そう。
ref: https://vuejs.org/v2/guide/computed.html#Computed-Setter
>>>
computedで得た値をそのままデータに代入
data() {
return {
items: null
}
}
computed: {
computedItems() {
this.$store.state.items
}
}
mounted() {
this.items = this.computedItems
}
これでボタンをクリックすればquantityに即時反映されるようになる。
