Vuetify の checkbox を v-model を使わずに実装する
Tweetv-model は汎用性が低い
v-model は一見便利そうに見えますし、Vuetify のコード例にもたくさん出てきますが、v-model は汎用性が低いので、大型アプリケーションにおいては使う機会が非常に少ないと思います。特に Vuex 等の state 管理用のライブラリを使用している場合にこれは顕著です。
v-model を使わない方法は?
v-model は一般的には :value="something" @input="handler" のシュガーシンタックスだと言われています。ただ、ドキュメントでもあまりはっきりしないのですが、実際には必ずしもそうではありません。
Vuetify の checkbox の場合は?
https://vuetifyjs.com/en/components/selection-controls
Veutify の checkbox は :value と @input では思ったように動作しません。正しくは以下のように :input-value と @change を使います。特に @change に関しては全くドキュメントに記載がないので、結構ハマりました。
https://codesandbox.io/s/6qpwx2l5w?fontsize=14&module=%2Fsrc%2FApp.vue
Vuetify の Checkbox
<template>
<div>
{{ checkboxState }}
<v-checkbox
v-for="box in checkboxes"
:key="box.value"
:input-value="checkboxState[box.value]"
@change="onChange(box.value);"
:label="box.text"
></v-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checkboxState: {
checkbox1: true,
checkbox2: false,
checkbox3: true
}
};
},
computed: {
checkboxes() {
return [
{ text: "checkbox1", value: "checkbox1" },
{ text: "checkbox2", value: "checkbox2" },
{ text: "checkbox3", value: "checkbox3" }
];
}
},
methods: {
onChange(name) {
this.checkboxState[name] = !this.checkboxState[name];
}
}
};
</script>
<style></style>
v-model を使わない場合には想像力を働かせるかソースコードを見る必要あり
ということで、v-model は一見便利に見えて v-model 以外の書き方をしようとすると、情報がなくつまづきます。その場合には想像力を働かせて当てていくか、ソースコードを直接読んだ方がいいでしょう。