Vue.jsでフォームの入力値をチェックし、リアルタイムで取得する方法
Vue.jsでhtmlフォームの入力値をチェックし、リアルタイムで取得する方法を知りたい。
v-modalディレクティブを使えば簡単に解決できます。
本記事では、v-modalディレクティブの実装方法について解説します。
実装サンプル
See the Pen
Vue.js テキストの入力値を取得 by Kohei (@kouk05)
on CodePen.0
v-modalディレクティブを使った実装サンプルです。
フォームのinput・radio・checkbox・textareaをそれぞれ入力すると、リアルタイムで入力値をチェック。
取得された値がpタグに出力されてる事がわかります。
実装方法は以下の通りです。
HTMLを準備
<div id="app">
<form action="">
<div>
<h2>テキスト</h2>
<input v-model="name" placeholder="メッセージ">
<p>名前: {{ name }}</p>
</div>
<div>
<h2>ラジオ</h2>
<input type="radio" id="men" value="男" v-model="sex" />
<label for="man">男</label>
<input type="radio" id="woman" value="女" v-model="sex" />
<label for="woman">女</label>
<p>性別: {{ sex }}</p>
</div>
<div>
<h2>チェックボックス</h2>
<input type="checkbox" id="one" value="one" v-model="num" />
<label for="one">one</label>
<input type="checkbox" id="two" value="two" v-model="num" />
<label for="two">two</label>
<input type="checkbox" id="three" value="three" v-model="num" />
<label for="three">three</label>
<p>番号: {{ num }}</p>
</div>
<h2>テキストエリア</h2>
<textarea v-model="message"></textarea>
<p>メッセージ: {{ message }}</p>
</form>
</div>
まず最初にHTMLでフォームを準備します。
使用するフォームタグをそれぞれ用意したら、属性にv-modalディレクティブを設定。
属性値に任意の値をフォームタグ毎に指定します。
次にフォームから入力値を取得して出力したい箇所に以下を設置します。
{{v-modalディレクティブの値に設定した任意値}}
v-modalディレクティブで指定した値を{{}}で囲い設置したい箇所に配置します。
Vue.jsで入力値をチェック・取得
const app = Vue.createApp({
data() {
return {
name: '',
message: '',
sex: '',
num: [],
}
},
});
app.mount("#app");
vue.jsでフォームの入力値をチェック・取得するコード例です。
dataメソッドに前章で指定したv-modalディレクティブの値を定義します。
text、textarea、radioは値に” “or’ ‘（ダブル・シングルクォーテーション）を指定。
チェックボックスの場合は[]（鉤括弧）を指定します。
以上で実装完了です。
まとめ
Vue.jsでフォームの入力値をチェックし、リアルタイムで取得する方法について紹介しました。
以上で解説を終わります。
目次