Vue.jsでフォームを制御をしよう

プログラミング界隈で盛り上がっているVue.jsを勉強していくコーナー 今回は、双方向バインディングでフォームの制御を思います。

今回したい事

  • Vue.jsでフォームに入力されたテキストを表示する。

完成したコード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>SampleTitle</title>
</head>

<body>
  <div id="app">
    {{ message }}<br>
    <input type="text" v-on:input="changeMessage"></input>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>

</html>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      changeMessage: function(event) {
        this.message = event.target.value;
      }
    }
  });
</script>


動くサンプル

動くサンプルはこちら

コード解説

HTML部分

<body>
  <div id="app">
    {{ message }}<br>
    <input type="text" v-on:input="changeMessage"></input>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>
v-on:input="changeMessage"

v-on:inputでchangeMessageというFunctionを呼び出しています。

スクリプト部分

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      changeMessage: function(event) {
        this.message = event.target.value;
      }
    }
  });
</script>

dataの初期値は'Hello Vue!'が挿入されています。
changeMessageは、

this.message = event.target.value;

valueが変更されれば検知して反映させるというメソッドになります。