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です
関連
-
npm ERR!コード ENOENT npm ERR!システムコールオープンエラーが解決されました。
-
VUE で未定義のエラーのプロパティ 'length' を読み取ることができません。
-
vueのインストール・イメージは、https://registry.npm.taobao.org/cnpmへのエラー・リクエストに失敗したと報告します。理由: getaddrinfo ENOTFOUND regis
-
エラーを解決する。モジュール 'chalk' が見つかりません。
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory
-
vue リソースの読み込みに失敗しました:サーバーは404(Not Foun)のステータスで応答しました。
-
[Intervention] パッシブイベントリスナー内部で、ターゲットがapparentsとして扱われるため、preventDefaultできない。
-
vueの開発です。[違反】スクロールブロックの<some>イベントに非パッシブなイベントリスナーを追加しました。このような場合、Consider ma...
-
vue reports Error in mounted hook: "SyntaxError: JSON の位置 0 に予期しないトークン u があります".
-
vue ssrがエラーを報告する ReferenceError: window is not defined
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
undefinedvueがエラーで動作する getaddrinfo ENOTFOUND localhost
-
TypeError: 未定義のプロパティ 'xxxx' を読み取ることができません。
-
無効なHostヘッダー サーバードメインのアクセス問題
-
vueコンソールがエラーUncaughtを報告する(promiseの場合)
-
Vue-Routerのアップグレードによる捕捉されない(promiseにおける)問題
-
vue プロジェクトのエラーメッセージ Uncaught ReferenceError: Vueは定義されていません。
-
vueプロジェクトでChromeコンソールの非パッシブイベントリスナー出力問題を解決する
-
vueの@のエイリアスがジャンプを認識しない
-
vue实现PC端分辨率适配
-
this.setの正しい使い方