Vue.jsでセレクトボックスの選択したoptionのvalue値を取得したい

Question

前提・実現したいこと

vue.jsを学習中により初心者な質問となってしまうことをお許しください。
selectboxにv-on:changeを使用することによって、optionのvalueの値を取得したい。
dataの「activeTab」を取得したvalue値で代入したい。

発生している問題・エラーメッセージ

特にエラーが発生しておりませんが、理想の動作が実行できないです。

該当のソースコード

		<select class="form-control" name="works_select"
		@change="onChange">
			<option value="website-view">
				Website
			</option>
			<option value="banner-view">
				banner
			</option>
			<option value="logo-view">
				logo
			</option>
		</select>

new Vue({
  el: '#works', // 
  data: {
	activeTab: 'website-view',
  },
	methods: {
	    onChange: function(val) {
	    	this.activeTab = val.value;
	    }
	},
});

試したこと

onclickだと簡単に実装できたのですが、onChaneだとどうもうまく出来ませんでした。。。

恐れ入りますが、ご回答お願いいたします。

Answer 1

onChange: function(val) {
  console.log(val) // この中から見つけた
  this.activeTab = val.target.value;
}

で取得できました。

https://jsfiddle.net/31acf9z5/

Comments

[junmurakami]

neko_daisuki 様

分かりやすく丁寧な解答をいただき誠にありがとうございます。
おかげさまで無事に実装できとても感謝しております。