質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

833閲覧

NUXT.JSでテンプレート内のメソッド引数に変数が入れられない

orori

総合スコア42

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/04/12 14:29

編集2019/04/12 14:32

プログラム初心者です。

シングルファイルコンポーネントを作成、axiosでWeb APIにPOSTしたいのですが、メソッドの引数にDATAの変数をあてると、Cannot read property 'text' of null エラーとなってしまいます。

数字や文字列ですと問題ないのですが、何か他のやり方がありますでしょうか。

vue.js

1<template> 2 <div class="columns"> 3 <button type="button" @click="addGenres(this.text)">追加</button> 4 </div> 5</template> 6 7<script> 8 export default { 9 asyncData () { 10 return { 11 text: "abc" 12 } 13 }, 14 methods: { 15 async addGenres(text){ 16 await this.$axios.$post(`/admin/genres/?text=${text}`) 17 } 18 } 19 } 20</script> 21 22

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

とりあえず「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:04

編集2019/04/12 16:39
NozomuIkuta

総合スコア1260

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

orori

2019/04/12 15:49 編集

詳細にありがとうございました。無事動きました!助かりました。 解説いただいたJavaScriptに変換されたものも見ていたのですが、_vmというのがコンポーネント自身なのですね。これも勉強になりました。vmや$vmとか、このtextがどこにあるのかもずっと探していました・・・
NozomuIkuta

2019/04/12 16:32

解決したようでよかったです。 回答は必要な部分だけ残して整理しておきますね。 ちなみに、テンプレートはrender関数に変換されますが、これはオプションとして直接定義することもできますので、公式サイトの該当部分(https://jp.vuejs.org/v2/guide/render-function.html)を読んで見るといいと思います。 補足ですが、render関数は、`this`をコンポーネント自身として呼び出します。 clickのfunctionには別の`this`(つまり`null`)が設定されるので、コンポーネントを参照できるように、 `var _vm = this`として事前に変数に格納して参照しています。
orori

2019/04/12 22:35

なるほど!テンプレートは、render関数に変換されるんですね。そしてthisはここで定義されているんですね。バラバラだった知識が結びついていく感覚です・・・大変勉強になります、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問