この記事はQiitaに書いていた自身の記事のコピーです。
これを解決します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| export default {
data: () => {
return {
test: 0
}
},
methods: {
testfunc: () => {
this.test++ // エラー
}
/*
testfunc2: function () {
this.test++ // こちらはうまくいく
}
*/
},
created () {
this.testfunc() // ここではthisが使えている
}
}
|
目次
うまくいかない原因
- アロー演算子
() => {}内のthisはこのvmを参照していないため
対処法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| var vm // --①
export default {
data: () => {
return {
test: 0
}
},
methods: {
testfunc: () => {
vm.test++ // 👏
}
},
created () {
vm = this // --②
this.testfunc()
}
}
|
ポイント
- vm用の変数を確保
- vm内に
createdかmountedを使ってvmを代入
もやもや
- 出来れば
varを使わずに書きたい - 外に仮置きしないで実装する方法は無いんだろうか…
もっときれいに書く方法が有れば、教えていただけるとありがたいです。