などの疑問や悩みを解決してまいります。
v-modelディレクティブを利用することで双方向バインディングを簡単に行うことができます。
しかしVueを学びたての方などv-modelディレクティブについてよく理解できないという方も多いのではないでしょうか。
この記事では初心者にもわかりやすいようにv-modelディレクティブについて解説していきます。
v-modelディレクティブとは
v-model ディレクティブは、Vue.jsで双方向データバインディングを簡単に行うためのディレクティブです。
これにより、ユーザーがフォームなどの入力フィールドを変更すると、その変更が Vue.js のデータに反映され、逆にデータが変更されると入力フィールドも更新される仕組みを作ることができます。
実際にv-modelディレクティブを使用してみよう
それでは実際にv-modelディレクティブを使用してみましょう。
今回2つのVueファイルを用意しました。ページに表示するApp.vueとコンポーネントファイルのPostContent.vueです。
<script setup lang="ts">
import PostContent from './components/PostContent.vue';
</script>
<template>
<div class="container">
<PostContent />
</div>
</template><script setup lang="ts">
import { reactive } from 'vue'
type inputType = {
name: string,
price: number
}
const inputData = reactive<inputType>({
name: '',
price: 0
})
const inputName = (e) => {
inputData.name = e.target.value
}
const inputPrice = (e) => {
inputData.price = e.target.value
}
const clear = () => {
if (confirm('入力内容をクリアしてもよろしいでしょうか？')) {
inputData.name = '',
inputData.price = 0
}
}
</script>
<template>
<div class="input_form">
<input v-on:input="inputName" type="text" :value="inputData.name"><br>
<input v-on:input="inputPrice" type="number" :value="inputData.price"><br>
<button v-on:click="clear">クリア</button>
</div>
<div class="input_data">
<p>商品名：{{ inputData.name }}</p>
<p>値段：{{ inputData.price }}円</p>
</div>
</template>
簡単に上記コードの機能を説明します。
まずフォームで入力した内容が下の「商品名：」と「価格：」の箇所に反映されます。
これはリアクティブな値ですので、フォームに入力をするたびにページが再構築され入力した内容が更新される仕組みになっています。
-
-
【Vue.js】refとreactiveを使ってリアクティブな変数を作成しよう。
続きを見る
またクリアのボタンをクリックすると、入力の内容がクリアされます。
これはv-onディレクティブを指定していて、クリックしてから確認のメッセージモーダルが表示されるところもポイントです。
-
-
【Vue.js】v-onディレクティブについて解説します。
続きを見る
それでは上記のコードをv-modelディレクティブに書き換えていきます。
v-modelディレクティブはのものだと説明しました。
上記のコードで双方向バインディングに関係する部分は以下になります。
<input v-on:input="inputName" type="text" :value="inputData.name"><br>
<input v-on:input="inputPrice" type="number" :value="inputData.price"><br>まず、１行目はv-onディレクティブでinput（入力）されたらinputName関数が呼び出されます。
inputName関数はフォームに入力した内容を取得し、inputData.nameに代入しています。
そしてclear関数でフォームの中身を削除するために:value="inputData.name"でバインディングしています。
これらによってinputData.nameがinputName関数とclear関数の双方向からバインディングされていることが分かります。
２行目についても同様です。
このように双方向からバインディングされている場合はv-modelディレクティブに置き換えることが可能です。
<input v-model="inputData.name" type="text"><br>
<input v-model="inputData.price" type="number"><br>置換が出来ましたら以下の記述が不要になりますので削除しましょう。
const inputName = (e) => {
inputData.name = e.target.value
}
const inputPrice = (e) => {
inputData.price = e.target.value
}
