環境
Nuxt.js: ^2.0.0
概要
DOMにrefを指定することで、子コンポーネントのプロパティやメソッドに触ることができる。
今回はrefを指定してあるメソッドを実行したかったのだが、なぜかうまく動かなかった。
原因は、refをスネークケース記法で書いていたことだった。(しょうもない）
このデバッグに時間がかかりすぎたのでここに知見を残しておく。
悪い例
スネークケース
<template>
<div>
<ComponentSpecial ref="component_special" />
</div>
</template>
// undefined
console.log(this.$refs.component_special);
パスカルケース
<template>
<div>
<ComponentSpecial ref="ComponentSpecial" />
</div>
</template>
// undefined
console.log(this.$refs.ComponentSpecial);
動く例
キャメルケース
キャメルケースで書くとドット記法でいけるのでおすすめです。
<template>
<div>
<ComponentSpecial ref="componentSpecial" />
</div>
</template>
// undefined
console.log(this.$refs.componentSpecial);
ケバブケース
ケバブケースの場合はブラケット記法で書くと参照できます。
<template>
<div>
<ComponentSpecial ref="component-special" />
</div>
</template>
// undefined
console.log(this.$refs['component-special']);
参考リンク
探してもあまり見つかりませんでした。