Vueのシンタックスシュガーに混乱したのでまとめた。
v-modelは基本的に:valueと@inputのシンタックスシュガーである。
ちなみに、:valueはv-bind:value、@inputはv-on:inputの省略形。
例えば、以下2行は同じである。
| <input v-model=”searchText”> <input :value=”searchText” @input=”searchText = $event.target.value”> |
ただ、必ずしもこれが成り立つわけではない。
例えば、Vuetifyのv-checkboxのv-modelは:input-valueと@changeのシンタックスシュガーになっている。
参考1: https://v2.ja.vuejs.org/v2/guide/forms
参考2: https://qiita.com/simezi9/items/c27d69f17d2d08722b3a
参考3: https://uncle-javascript.com/vuetify-checkbox
.sync修飾子は:〇〇と@update:〇〇のシンタックスシュガーである。
例えば、以下2行は同じである。
| <TableHeader :headers.sync=”headers” /> <TableHeader :headers=”headers” @update:headers=”val => headers = val” /> |
どちらの場合も子コンポーネントであるTableHeaderから以下のようにemitすればheadersを更新できる。
| $emit(‘update:headers’, newHeaders) |
なお、Vue3からは.sync修飾子は廃止され、v-modelを使うようになったらしい。
（Vue2では、子コンポーネントとの双方向バインディングにおいてv-modelは使いづらかった）
参考1: https://v2.ja.vuejs.org/v2/guide/components-custom-events
参考2: https://qiita.com/harhogefoo/items/7232508db1f07e6b1859
参考3: https://itoka.hatenadiary.com/entry/2021/05/06/005644
参考4: https://qiita.com/toshifumiimanishi/items/7a276d5f3c60fbaf986d
入会申込
ログイン
