list rendering + v-model : v-model にdynamic な値を割り当てる/ Vuetify: v-dialog + list rendering

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]" としたが正しく動作しなかった。

f:id:monteecristoo:20200214050850p:plain

f:id:monteecristoo:20200214050719p:plain

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 はプロパティで指定すると正常に動作した。

f:id:monteecristoo:20200214051152p:plain

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.