Uncaught TypeError: Cannot read property 'refs' of undefined


#1

お世話になります。

以下のテンプレートで、mountedで、console.log (this.$refs) と定義しました。

<form>
  <input type="text" value="001" ref="test">
  <button type="button" @click="clickTest">BUTTON</button>
</form>

実行すると、以下のエラーが発生します。

Uncaught TypeError: Cannot read property ‘refs’ of undefined

どうして$refsがundefinedになるのかわからず皆さまのお知恵を拝借したいのですが、ヒントだけでも教えていただけると助かります。

よろしくお願いいたします。


#2

これは動作します https://codepen.io/anon/pen/qQVoNO


#3

ご返答ありがとうございます。
という事は、私の開発環境がおかしいという認識でよさそうです。
まだ、それほど作りこんでいないので、最初から作り直してみます。
ありがとうございました。


#4

どういたしまして .


#5

mounted: () => {
console.log(“mounted()”, this.$refs.test);
}

と宣言されていないでしょうか?

アロー関数は this を固定されるので $ref が参照できないのでは
ないかと思われるのですがいかがでしょう。


#6

ご返答ありがとうございます。
正にその通り、アロー関数を使っていました。

mounted: function () {
console.log(this.$refs)
}

アロー関数はthisを固定するのですね。知りませんでした。
上記のような形で宣言したところ、参照することができました。

vue.ms様、Prabhu_Vue様、ご返答いただき
ありがとうございました。