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

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

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

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

3180閲覧

thisの参照が効かない

tomagurosu

総合スコア37

Vue.js

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2018/09/05 11:39

TypeScript

1export default class Test extends Vue { 2 private clickEventClass: string = ""; 3 private clickEventfunctions: any[] = []; 4 5 mounted() { 6 this.addClickEvents(this.clickEventClass, this.clickEventfunctions); 7 } 8 9 @Watch(...........) 10 setClickEventsInfo() { 11 this.clickEventClass = "targetClass"; 12 this.clickEventfunctions.push(function (this: Test) { this.testFunc() }); 13 } 14 15 addClickEvents(targetClass: string, functions: any) { 16 console.log(functions); 17 const targetElement = document.getElementsByClassName(targetClass) as HTMLCollectionOf<HTMLElement>; 18 targetElement[0].onclick = () => { 19 while (functions.length > 0) { 20 functions.shift()(); 21 } 22 }; 23 } 24 25 testFunc() { 26 console.log("call test function"); 27 } 28 29}

typescriptでvue.jsを使い上記のようなクラスをvue内で使用しています。
目的としては配列内の関数を対象のcssクラスにクリックイベント登録したいと考えています。
実際にaddClickEventsで登録したのちにイベント発火させると下記のエラーとなってしまいます。

Uncaught TypeError: Cannot read property 'testFunc' of undefined

下記のようなコードで検証してみても同様のエラーが出ましてthisが参照できていないのではないかと推測しているのですが対処法がなかなか見当たらないのが現状です。
ちなみに何故かVSCodeではundefined部分が補完で出ます......

setClickEventsInfo() { this.clickEventClass = "targetClass"; this.clickEventfunctions.push(function (this: Test) { console.log(this.clickEventClass);}); }

アドバイスよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

js

1this.clickEventfunctions.push(function (this: Test) { console.log(this.clickEventClass);}); 2 3// thisを別の変数に格納する 4const self = this; 5this.clickEventfunctions.push(function () {console.log(self.clickEventClass);}); 6 7// thisをbindする 8this.clickEventfunctions.push( 9 function () {console.log(this.clickEventClass);}.bind(this) 10); 11 12// アロー関数を使う 13this.clickEventfunctions.push(() => {console.log(this.clickEventClass);});

投稿2018/09/05 12:11

spookybird

総合スコア1803

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問