0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vue2.7ではVue3のようなカスタムコンポーネント上で使えるv-modelを使用した親子間の双方向バインディングができない

Last updated at Posted at 2022-11-07

タイトルにあるとおり、Vue2.7とVue3では似ているようで完全に機能がバックポートされているわけではないので一部使えないVue3の機能があります。

前提知識

v-modelはvaluepropsと@inputemitイベントを一つのディレクティブにまとめて双方向バインディングをするための省略記法、いわゆるシンタックスシュガーです。

問題

Vue >= 3からはこのv-modelの記法が

プロパティ: value -> modelValue
イベント: input -> update:modelValue

に変わりました。https://v3.ja.vuejs.org/guide/migration/v-model.html
たしかにselectboxやswitch buttonなどでもイベントがinputという命名になるのは少し変な感じがするのでupdateにしたのは合理的ですね。
この内容はVue3のマイグレーションガイドでも大々的に「破壊的変更」であると明記されています。
Vue2.7からVue3の記法をサポートするよ〜みたいな情報を鵜呑みにしてしまっている人が多いと思いました。
内部のエコシステム自体は変わっておらず、実は拡張構文をVue2にバックポートしただけなので、それほど全ての機能をサポートしているわけでもないようですね。
Vue2リポジトリにその内容がissueとして建てられていました1

The main goal of v2.7 is not align with Vue 3 completely but only back port some of the useful features (not breaking changes) introduced in Vue 3. It should be compatible with Vue 2 for most cases.

要するにv2.7の主な目的は、Vue3に合わせることではなく、そのVue3へのマイグレーション段階として近い記法でかけるようにとバックポートしただけだということだそうです。

解決策

いままでのVue2の書き方の通りvalue/@inputを使いましょう。

  1. https://github.com/vuejs/vue/issues/12654

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?