とりあえず「Vue.jsのテンプレートの中ではthis
をつけずにデータを参照すればいいんだな」と覚えておけば大丈夫です。
以下、解説です。
Nuxt.js(つまりVue.js)のシングルファイルコンポーネントのtemplate
部分では、変数は暗黙的に「this
のXXX」という解釈がなされます。ここでいうthis
はコンポーネント自身です。
ただし、イベントハンドラでは解釈が変わります。
例えば、<button type="button" @click="addGenres(this.text)">追加</button>
は、内部的に以下のようなJavaScriptに変換されます。
JavaScript
1var render = function() {
2 var _vm = this
3 var _h = _vm.$createElement
4 var _c = _vm._self._c || _h
5 return _c("div", { staticClass: "columns" }, [
6 _c(
7 "button",
8 {
9 attrs: { type: "button" },
10 on: {
11 click: function($event) {
12 // このfunctionはnullをthisとして呼び出されます。
13 // そのため、this.textの部分で、
14 // `Cannot read property 'text' of null`のエラーが発生します。
15 return _vm.addGenres(this.text)
16 }
17 }
18 },
19 [_vm._v("追加")]
20 )
21 ])
22}
一方、<button type="button" @click="addGenres(text)">追加</button>
とすると、
JavaScript
1var render = function() {
2 // render関数はコンポーネント自身をthisとして呼び出します。
3 // 最初にthisを変数に格納しています。
4 var _vm = this
5 var _h = _vm.$createElement
6 var _c = _vm._self._c || _h
7 return _c("div", { staticClass: "columns" }, [
8 _c(
9 "button",
10 {
11 attrs: { type: "button" },
12 on: {
13 click: function($event) {
14 // このfunctionのthisはnullですが、
15 // _vmつまりコンポーネント自身のtextを参照するので、エラーになりません。
16 return _vm.addGenres(_vm.text)
17 }
18 }
19 },
20 [_vm._v("追加")]
21 )
22 ])
23}
参考資料
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/12 15:49 編集
2019/04/12 16:32
2019/04/12 22:35