やりたいこと
とある.vueファイル(エラー)
export default {
data: () => {
return {
test: 0
}
},
methods: {
testfunc: () => {
this.test++ // エラー
}
/*
testfunc2: function () {
this.test++ // こちらはうまくいく
}
*/
},
created () {
this.testfunc() // ここではthisが使えている
}
}
うまくいかない原因
- アロー演算子
() => {}
内のthisはこのvmを参照していないため
対処法
とある.vueファイル
var vm // --①
export default {
data: () => {
return {
test: 0
}
},
methods: {
testfunc: () => {
vm.test++ // 👏
}
},
created () {
vm = this // --②
this.testfunc()
}
}
ポイント
①vm用の変数を確保
②vm内にcreated
かmounted
を使ってvmを代入
もやもや
- 出来れば
var
を使わずに書きたい - 外に仮置きしないで実装する方法は無いんだろうか…
もっときれいに書く方法が有れば、教えていただけるとありがたいです。