Vuetifyのv-checkboxやv-switchなどは:valueではなくて:input-valueでコンポーネントの値を決めないといけなかった
Vueだとv-modelは:valueと:inputの糖衣構文に過ぎないはずだが、Vuetifyのv-checkboxやv-switchにセットしない用途だからとって:valueを使えば良いというわけではないという話。 なんというか表示目的のみで<v-checkbox>や<v-switch>を使いたいときの話。つまりv-modelを使って変数を変更しない。
やりたいこと
2つチェックボックスを用意して、2つめのチェックボックスは上の値に同期するようしたい。
より現実的な使い方だと2つめのチェックボックスには条件式を書くような感じ。
他のコンポーネントが条件式に含まれる変数を変更して、それに応じてチェックボックスにチェックが入ったりする。
:valuleを使ったときの挙動
値が変更されてからは同期されるが最初もtrueなのにうまく同期されてないことがわかる。
以下のように最初
https://gyazo.com/90a0e47c61fa985583d2631f4bd304b5
code:html
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-checkbox v-model="checkbox1" :label="Checkbox 1: ${checkbox1.toString()}"></v-checkbox>
<v-checkbox :value="checkbox1" :label="Checkbox 1 (sync): ${checkbox1.toString()}"></v-checkbox>
</v-container>
</v-app>
</div>
:input-valueを使えば思った通りの挙動になる
ちゃんと最初から2つともチェックされて状態になる。
https://gyazo.com/2911ff117f0753c014d85c54d103ca74
code:html
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-checkbox v-model="checkbox1" :label="Checkbox 1: ${checkbox1.toString()}"></v-checkbox>
<v-checkbox :input-value="checkbox1" :label="Checkbox 1 (sync): ${checkbox1.toString()}"></v-checkbox>
</v-container>
</v-app>
</div>
参考
https://gyazo.com/12f208bd76b7e9e1858ff785bfd68aef