SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

単純に 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>

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

関連するメモ

コメント