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でフォームの入力値をチェックし、リアルタイムで取得する方法について紹介しました。

以上で解説を終わります。

Vue.jsでフォームの入力値をチェックし、リアルタイムで取得する方法

実装サンプル

HTMLを準備

Vue.jsで入力値をチェック・取得

まとめ

関連記事