1. ホーム
  2. vue

VueComponent で未定義のプロパティ '$el' を読み取ることができません。

2022-02-10 01:03:01

.vueファイルのtemplateタグで、以下のように子コンポーネントを参照します。

<scroll class="middle-r" ref="lyriclist" :data="currentLyric && currentLyric.lines"></ scroll>

そして、オブジェクトを取得するためのメソッドのmethodsプロパティに、<script>を記述します。スクロール> は子コンポーネントなので、this.$refs.lyricList を通して子コンポーネント内の DOM を操作することができないので、DOM オブジェクトを取得するために $el を参照する必要があります。
this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px,0,0)` とする。

そして、ブラウザはエラーを報告します。エラーファイルplayer.vue、エラーが発生した行数は423、エラーはおそらく$elプロパティが未定義であり、書き込み文がmiddleTouchMove()関数内にあることを意味するものと思われます。

解析中 : エラーの種類によると、このオブジェクトが定義されていないと言うことです、その大まかな推測は this.$refs.lyricList がコンポーネント要素に到達しなかった、あなたはテンプレート内の html の要素の ref 属性の定義を組み合わせることができます。htmlのref='lyriclist'とjsのthis.$refs.lyricListは同じ参照ではないことがわかりました。

player.vue?55e8:423 Uncaught TypeError: Cannot read property '$el' of undefined at VueComponent.middleTouchMove 

解決方法 テンプレート内のrefプロパティの値をref='lyricList'に変更すればOKです