Vuetifyのv-checkboxのバグについて

概要

• ハマったポイントなので、メモ書きも兼ねて
• 他にもハマっている人がいれば

前提として

• SPAで構成しているサイト
• nuxtで実装
• vuetifyを使用

バグの内容

• 以下のようにv-checkboxを実装している場合
  • 別ページに遷移後、また戻るとv-checkboxの値が変わる

<template>
  <div>
    <v-checkbox
      v-for="option in options"
      v-model="selected"
      :value="option"
    >
      <div>{{ option.name }}</div>
    </v-checkbox>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      // optionは、 { name, value } のObject
      type: Array, 
      required: true
    }
  },
  data() {
    return {
      selected: []
    }
  }
}
</script>

バグの原因(未検証)

• 仮設だが、v-checkboxにバインドしているv-modelとvalueが競合している
• 再読み込み時には、valueが優先的に評価され、必ずtrueになる
  • 時間がある時に、コードを検証しておきます...

対応策

• 以下のように実装を修正
• 正直、苦肉の策
  • もっと、いい解決策があれば、教えてください

<template>
  <div >
    <!-- v-ifにより、vueの再マウントが完了するまで、非表示にする -->
    <v-checkbox
      v-for="option in checkbox_options"
      v-if="true"
      v-model="selected"
      :value="option"
    >
      <div>{{ option.name }}</div>
    </v-checkbox>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      // optionは、 { name, value } のObject
      type: Array, 
      required: true
    }
  },
  data() {
    return {
      selected: [],
      checkbox_options: null
    }
  },
  updated() {
     // 更新のたびに、checkbox_optionsを再評価することで、
     // v-modelが優先して、評価される
     this.checkbox_options = this.options
  }
}
</script>