Vue.js~イベント処理~

#概要

フォームの入力の読み取り、送信するまでのプログラムについての記事です。
v-on,v-modelについて主に取り上げています。

#イベント発生
今回のフォームの実装では、ユーザーが入力して送信ボタンを押すのがイベント発生となります。
イベントを設定します。

#HTML

index.html

<form @submit.prevent ="addItem">
  <input type="text" v-model="newItem">
   <input type="submit" value="add">
 </form>

イベントはsubmitです。
イベント処理を実装するのはv-onです。(上記では@sbmit)となっています。

更に今回のイベントは、ユーザーからの入力内容を受け取り反映したいので、input type="text"から値を受け取ります。

#v-model

v-model="データオブジェクトプロパティ"

#v-on

v-on="...." (@イベント名="")

sbmitされたときのメソッドを指定します。今回は、addItemです。
更に今回はボタンタグにsubmitを使用しています。それにより、ページ変移が起きてしまうのでpreventDefaultメソッドを使用します。

index.html

@submit.prevent

と記述します。

#Vue

つづいて、Vueの実装内容です。

index.js

data:{
  newItem:'',
  lists:[
    'list1',
    'list2',
    'list3'
   ]
},

#双方向データバインディング
先程、v-modelで指定したプロパティはnewItemです。
現在こちらのプロパティは空に設定しています。こちらに文字列を入れてみました。
すると、テキストボックスに初期値が反映されていました。
これは、双方向データバインディングといいます。Vue.jsのフォーム開発で大切になります。
データオブジェクトからテキストボックスの反映はもちろん。テキストボックスからの反映も可能にします。(データオブジェクトとテンプレート状態を同期する)

ちなみに、v-modelを利用した場合はテキストボックスでHTMLから指定されたValue属性は無効になります。

index.js

methods:{
 addItem: function() {
   this.lists.push(this.newItem);
   this.newItem = '';
  }
}

次に送信されたときの処理についてです。methodsというキーでイベントオブジェクトを作ります。
先程のHTMLで指定したaddItemで処理を書いていきます。
今回の処理内容は、submitしたときにlistsという配列にプッシュします。
data内のlistにはthisでアクセスすることが出来ます。this.lists.pushとすることで追加することが出来ます。何をプッシュするのかv-modelで取得したプロパティですね。
値を送信した後に値がテキストボックスからなくなるようにthis.newItem = ''空文字にします。