例えば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);
}
}
```
コメント (0)
あなたもコメントしてみませんか
アカウント新規作成(無料)
既にアカウントを持っている方は
ログイン