Vue.jsでアロー関数を使うと詰む

概要

この1週間、Vue.jsを使っていて、詰んだことを書きます。

何があったの？

Vue.jsでは、関数内で"this"を使うことができます。this を用いて、Vue内の他のdataの値や関数を取得できる……はずだった。

new Vue({
	el: "#root",
	data: {colorcode: "#FF00FF"},
	methods: {
		change_code: (event) => {
			console.log(this.colorcode);
		});
	}
});

ですが、change_code 関数内から呼び出した、this.colorcodeの値は "undefined" のままです。いろいろ試してみたけれど、やはり "undefined" のままでした。
原因は、アロー関数「(event) => {...}」を使ったせいでした。なので、アロー関数を、アロー関数でない形「function(event) {...}」に書き換えれば、値を取得することができるようになります。

new Vue({
	el: "#root",
	data: {colorcode: "#FF00FF"},
	methods: {
		change_code: function(event) {
			console.log(this.colorcode);
		});
	}
});

おわりに

対処法が分かれば簡単ですが、なかなか気づけなかったので、Qiitaに投稿しておきます。皆さまも、お気をつけくださいませ。