例えばSwitchsを使う際、以下のようにv-modelを使うとちょっと困ることがある。 ```html <!-- switch.vue --> <template> <div class="item switch"> <v-switch v-model="bool" @change="change"></v-switch> </div> </template> ``` 具体的にどう困るのかというと、上位コンポーネントによってこのコンポーネントの操作以外でboolが変わった場合 (例えばAll ResetみたいなボタンでこのComponentに渡しているboolの参照元プロパティがtrue -> falseになった場合とか)、boolプロパティ自体はリアクティブに反映されるが、Switchが動いてくれない。 色々試してみたが、結局valueを使うことでボタンもリアクティブに動いてくれるようになった ```html <v-switch :value="bool" @change="change"></v-switch> ``` ただ、この場合も少し問題があり、@changeで取って来れるvalueがswitch=falseの場合になぜかnullが返却されるようになる(v-modelを使うとちゃんとfalseが返ってくる)。 ```javascript methods: { change(value) { // true or null を true or falseに変換してemit this.$emit("change", value ? true : false); } } ```
2020/12/29 21:53:27

コメント (0)

あなたもコメントしてみませんか

アカウント新規作成(無料)

既にアカウントを持っている方は ログイン