vue.jsで入力内容を即座にDOMに反映させる

2021年1月9日

vue.jsで入力内容を即座にDOMに反映させる

前回の記事ではv-modelを使用してフォームの入力内容を即座にDOMに反映していましたが、全角が出来ませんでした。全角を反映させるには、一文字入力するたびにイベントハンドラを呼び出すみたいなのでサンプルを書き残しておきたいと思います。

プログラム

v-on:input="InputHandler"

【HTML】


<!DOCTYPE html>
<html>

<head>
  <title>sample</title>
  <meta http-equiv="content-type" charset="utf-8">
</head>

<body>
  <div id="app">
    <input type="text" v-on:input="InputHandler" v-model="content">
    <div>{{ content }}</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
</body>

</html>

【JS】


var app = new Vue({
  el: '#app',
  data: {
    content: ''
  },
  methods: {
    InputHandler: function ($event) {
      this.content = $event.target.value;
    }
  }
});