【vue】v-modelを言い換えると

Tweet

Category JavaScript 2020/02/01

問題

単純に v-model=”変数” ができなくて、表示の処理と、入力の受付の処理を分けたいのですが。

答え

フォームの要素によって拾うイベントを変えているので、以下のようになる。

input type=”text”

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

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

input type=”radio”, input type=”checkbox”

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

<input type="radio"
   :value="xxx"
   @change="xxx = $event.target.value"
>

select

<select v-model="xxx">

<select
   :value="xxx"
   @change="xxx = $event.target.value"
>

コンポーネント

<mycomponent v-model="xxx"></mycomponent>

<mycomponent
   :value="xxx"
   @input="xxx = $event.target.value"
></mycomponent>

表示するものを変数そのまま以外のものにしたり、
入力されたとき単純に変数に代入する以外の処理を入れることができる。