LoginSignup
1
1

More than 3 years have passed since last update.

Vueのisとv-modelは併用してはいけない

Posted at

事象

is属性で要素名を指定しているコンポーネントに対して、v-modelを使用すると、v-modelが機能しなくなりました。

どういうことかは例を見ていただくと早いです。

正常

<input type="text" v-model="value">

https://jsfiddle.net/simochee/fjdvowr7/4

異常

<div is="input" type="text" v-model="value">

https://jsfiddle.net/simochee/fjdvowr7/5

原因

なぜこんな挙動になるのか、それを解決する記述を見つけることはできませんでした。

ともかくisv-modelは併用しないよう気をつけましょう。

おまけ

疑似v-modelの場合は更に奇妙な挙動になりました。

初期値は設定されるし、入力値は設定できるものの、代入による値を上書きできなくなります。

<div
  is="input"
  type="text"
  :value="value"
  @input="value = $event.target.value"
>

https://jsfiddle.net/simochee/fjdvowr7/7/

1
1
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
1
1