回答編集履歴

4

整理

2019/04/12 16:39

投稿

NozomuIkuta
NozomuIkuta

スコア1260

test CHANGED
@@ -1,58 +1,18 @@
1
- Nuxt.js(つまりVue.jsグルファイルコンポネントの`template`部分では、変数は暗黙的に「`this`のXXX」という解釈がなされます。ここいう`this`はコンポーネント自身です。
1
+ あえず「Vue.jsのプレートのでは`this`をつけずにデータを参照すればいいんだな」と覚えておけば大丈夫です。
2
2
 
3
3
 
4
4
 
5
- ですので`<button type="button" @click="addGenres(this.text)">追加</button>`は、`this.this.text`と釈され、定義されていませんのエラーになります。
5
+ 以下、解です。
6
6
 
7
7
 
8
8
 
9
- `<button type="button" @click="addGenres(text)">追加</button>`とすれば、`asyncData`で定義して`text`を`this.text`として引数に設定きます。
9
+ Nuxt.js(つまりVue.js)のシングルファイルコンポーネントの`template`部分では変数は暗黙的に「`this`のXXX」という解釈がなされます。ここでい`this`はコンポーネント自身です。
10
+
11
+ ただし、イベントハンドラでは解釈が変わります。
10
12
 
11
13
 
12
14
 
13
- ---
14
-
15
-
16
-
17
- ~~追記~~
18
-
19
-
20
-
21
- ~~すいません、夜遅くに回答したら頭働いてなくて間違えました。。。~~
22
-
23
- ~~`this.text`としてもちゃんと解釈してくれます。Vue.jsは"頭いい"ので。。~~
15
+ 例えば、`<button type="button" @click="addGenres(this.text)">追加</button>`は、内部的に以下のようなJavaScriptに変換されます。
24
-
25
- ~~"バカ"ですいません(>_<)~~
26
-
27
-
28
-
29
- ~~ちょっと別の回答用意するのでお待ちを。。~~
30
-
31
-
32
-
33
- ---
34
-
35
-
36
-
37
- 追記
38
-
39
-
40
-
41
- というわけで、回答です。
42
-
43
- 結論から言うと、最初の回答であってました。
44
-
45
- ほんとすいません。精進します(> <)
46
-
47
-
48
-
49
- 一応、なぜ`this.text`がダメで数字や文字列が大丈夫かを解説します。
50
-
51
- 興味があればどうぞ。
52
-
53
-
54
-
55
- ororiさんが書いたテンプレート部分は、内部的に、例えばこんな感じのJSに変換されます。
56
16
 
57
17
 
58
18
 
@@ -80,7 +40,13 @@
80
40
 
81
41
  click: function($event) {
82
42
 
43
+ // このfunctionはnullをthisとして呼び出されます。
44
+
45
+ // そのため、this.textの部分で、
46
+
47
+ // `Cannot read property 'text' of null`のエラーが発生します。
48
+
83
- return _vm.addGenres(this.text) // <- ここが違う!
49
+ return _vm.addGenres(this.text)
84
50
 
85
51
  }
86
52
 
@@ -100,21 +66,17 @@
100
66
 
101
67
 
102
68
 
103
- ここで重要なので`click`というfunctionです。
104
-
105
- `button`要素がクリックされると、このfunctionが実行されますが、「functionの`this`」が`null`として呼び出されます。
106
-
107
- `null`には、`text`というプロパティはありませんので、`Cannot read property 'text' of null`つまり「nullのtextなんてないよ!」いうエラーがでま
69
+ 一方、`<button type="button" @click="addGenres(text)">追加</button>`とすると、
108
70
 
109
71
 
110
72
 
111
- 一方、`this.text`ではなく`text`だけにすると以下のように変換されます。
112
-
113
-
114
-
115
- ```
73
+ ```JavaScript
116
74
 
117
75
  var render = function() {
76
+
77
+ // render関数はコンポーネント自身をthisとして呼び出します。
78
+
79
+ // 最初にthisを変数に格納しています。
118
80
 
119
81
  var _vm = this
120
82
 
@@ -136,7 +98,11 @@
136
98
 
137
99
  click: function($event) {
138
100
 
101
+ // このfunctionのthisはnullですが、
102
+
103
+ // _vmつまりコンポーネント自身のtextを参照するので、エラーになりません。
104
+
139
- return _vm.addGenres(_vm.text) // <- ここが違う!
105
+ return _vm.addGenres(_vm.text)
140
106
 
141
107
  }
142
108
 
@@ -156,8 +122,12 @@
156
122
 
157
123
 
158
124
 
159
- この場合`_vm.text`となります。`_vm`はコンポーネント自身のことなので、コンポーネントに設定した`text`がちゃんと`addGenres`メソッドに引数として渡ります。
125
+ ---
160
126
 
161
127
 
162
128
 
129
+ 参考資料
130
+
163
- とりあえず「Vue.jsのテンプレートの中では`this`をつけずにデータを参照すればいいんだな」と覚えておけば大丈夫です。
131
+ - [renderオプション](https://jp.vuejs.org/v2/api/#render)
132
+
133
+ - [render関数解説](https://jp.vuejs.org/v2/guide/render-function.html)

3

編集

2019/04/12 16:39

投稿

NozomuIkuta
NozomuIkuta

スコア1260

test CHANGED
@@ -14,16 +14,150 @@
14
14
 
15
15
 
16
16
 
17
+ ~~追記~~
18
+
19
+
20
+
21
+ ~~すいません、夜遅くに回答したら頭働いてなくて間違えました。。。~~
22
+
23
+ ~~`this.text`としてもちゃんと解釈してくれます。Vue.jsは"頭いい"ので。。~~
24
+
25
+ ~~"バカ"ですいません(>_<)~~
26
+
27
+
28
+
29
+ ~~ちょっと別の回答用意するのでお待ちを。。~~
30
+
31
+
32
+
33
+ ---
34
+
35
+
36
+
17
37
  追記
18
38
 
19
39
 
20
40
 
21
- ません夜遅くに回答したら頭働いてなくて間違えました。。
41
+ うわけで、回答です
22
42
 
23
- `this.text`もちゃんと解釈てくれますVue.jsは"頭いい"ので。。
43
+ 結論から言う、最初の回答であっ
24
44
 
25
- "バカ"ですいません(>_<)
45
+ ほんとすいません。精進します(> <)
26
46
 
27
47
 
28
48
 
49
+ 一応、なぜ`this.text`がダメで数字や文字列が大丈夫かを解説します。
50
+
51
+ 興味があればどうぞ。
52
+
53
+
54
+
55
+ ororiさんが書いたテンプレート部分は、内部的に、例えばこんな感じのJSに変換されます。
56
+
57
+
58
+
59
+ ```JavaScript
60
+
61
+ var render = function() {
62
+
63
+ var _vm = this
64
+
65
+ var _h = _vm.$createElement
66
+
67
+ var _c = _vm._self._c || _h
68
+
69
+ return _c("div", { staticClass: "columns" }, [
70
+
71
+ _c(
72
+
29
- ちょっと別の回答用意するのでお待ちを。。
73
+ "button",
74
+
75
+ {
76
+
77
+ attrs: { type: "button" },
78
+
79
+ on: {
80
+
81
+ click: function($event) {
82
+
83
+ return _vm.addGenres(this.text) // <- ここが違う!
84
+
85
+ }
86
+
87
+ }
88
+
89
+ },
90
+
91
+ [_vm._v("追加")]
92
+
93
+ )
94
+
95
+ ])
96
+
97
+ }
98
+
99
+ ```
100
+
101
+
102
+
103
+ ここで重要なので`click`というfunctionです。
104
+
105
+ `button`要素がクリックされると、このfunctionが実行されますが、「functionの`this`」が`null`として呼び出されます。
106
+
107
+ `null`には、`text`というプロパティはありませんので、`Cannot read property 'text' of null`つまり「nullのtextなんてないよ!」というエラーがでます。
108
+
109
+
110
+
111
+ 一方、`this.text`ではなく`text`だけにすると以下のように変換されます。
112
+
113
+
114
+
115
+ ```
116
+
117
+ var render = function() {
118
+
119
+ var _vm = this
120
+
121
+ var _h = _vm.$createElement
122
+
123
+ var _c = _vm._self._c || _h
124
+
125
+ return _c("div", { staticClass: "columns" }, [
126
+
127
+ _c(
128
+
129
+ "button",
130
+
131
+ {
132
+
133
+ attrs: { type: "button" },
134
+
135
+ on: {
136
+
137
+ click: function($event) {
138
+
139
+ return _vm.addGenres(_vm.text) // <- ここが違う!
140
+
141
+ }
142
+
143
+ }
144
+
145
+ },
146
+
147
+ [_vm._v("追加")]
148
+
149
+ )
150
+
151
+ ])
152
+
153
+ }
154
+
155
+ ```
156
+
157
+
158
+
159
+ この場合`_vm.text`となります。`_vm`はコンポーネント自身のことなので、コンポーネントに設定した`text`がちゃんと`addGenres`メソッドに引数として渡ります。
160
+
161
+
162
+
163
+ とりあえず「Vue.jsのテンプレートの中では`this`をつけずにデータを参照すればいいんだな」と覚えておけば大丈夫です。

2

編集

2019/04/12 15:37

投稿

NozomuIkuta
NozomuIkuta

スコア1260

test CHANGED
@@ -20,8 +20,10 @@
20
20
 
21
21
  すいません、夜遅くに回答したら頭働いてなくて間違えました。。。
22
22
 
23
- `this.text`としてもちゃんと解釈してくれます。Vue.jsは頭いいので(>_<)
23
+ `this.text`としてもちゃんと解釈してくれます。Vue.jsは"頭いい"ので。。
24
+
25
+ "バカ"ですいません(>_<)
24
26
 
25
27
 
26
28
 
27
- ちょっと別の回答用意するのでお待ちを。。
29
+ ちょっと別の回答用意するのでお待ちを。。

1

追記

2019/04/12 15:16

投稿

NozomuIkuta
NozomuIkuta

スコア1260

test CHANGED
@@ -7,3 +7,21 @@
7
7
 
8
8
 
9
9
  `<button type="button" @click="addGenres(text)">追加</button>`とすれば、`asyncData`で定義している`text`を`this.text`として引数に設定できます。
10
+
11
+
12
+
13
+ ---
14
+
15
+
16
+
17
+ 追記
18
+
19
+
20
+
21
+ すいません、夜遅くに回答したら頭働いてなくて間違えました。。。
22
+
23
+ `this.text`としてもちゃんと解釈してくれます。Vue.jsは”頭いい”ので(>_<)
24
+
25
+
26
+
27
+ ちょっと別の回答用意するのでお待ちを。。。