updated: 2020/2/15
vue@2.6.11
vuetify@2.2.12
vuetify の v-dialog を v-for 内で使用するとき個別の値を v-model に割り当てないとdialog に正しい list の値がパスされない。
https://github.com/vuetifyjs/vuetify/issues/5246
そこで v-for="(item, index) in list" で index を生成し、v-mode="deleteDialog[index]" としたが正しく動作しなかった。
solution 1)
deleteDialog の値が update された後、$forceUpdate() する。
<v-icon @click="initDeleteDialog">Delete</v-icon>
methods: {
initDeleteDialog(index) {
this.deleteDialog[index] = true
this.$forceUpdate()
}
}
ref)
https://vuejs.org/v2/guide/components-edge-cases.html#Forcing-an-Update
solution 2)
v-model はプロパティで指定すると正常に動作した。
ref:
https://forum.vuejs.org/t/how-do-i-have-dynamic-v-model/18833
See the Pen Vue Form by Cheah Jer Fei (@jeffhappily) on CodePen.