以下に、Vue ページでの DOM 操作が有効にならない問題を解決する記事を紹介します。参考になるので、皆さんのお役に立てれば幸いです。
現象:
Element UIを使用してツリー構造をレンダリングし、各ノードにマウスが移動したときに表示される操作ボタンを設計すると、次のような効果が得られます。エラー部分:
新しいノードを追加した後、新しいノードの近くに移動します (写真では、レベル 2 に移動しています) 機能ボタンの表示位置がオフセットされています。
原因検索:
デバッグ後、ノードを追加した後、ノードを取得するためにDOM操作を実行すると、前の構造がまだ取得されており、新しく追加されたノードが取得されないことがわかりました。原因分析:
vue で使用される仮想 DOM によってページがレンダリングされると推測されますが、それは Vue インスタンスの仮想 DOM にあり、取得できません。解決策:
Vue.nextTickを使用して、公式資料を見てください:
「次のDOM更新サイクルが終了した後に遅延コールバックを実行する」、この文は特に理解できるわけではありませんが、 DOM 更新は周期的なプロセスであり、プロセスが終了するまで実際の DOM 要素を取得できないことがわかります (このサイクルがどれくらい続くかについては、まだ調査中です)。 nextTickにDOM操作を配置することで、更新されたDOMを取得できます。
結果:
上記の原理に基づいて、データ更新後に nextTick で DOM 操作関数が呼び出され、理想的な効果が得られます。以上、皆様の参考になれば幸いです。
関連記事:
nodejsはQRコードを生成する超簡単なメソッドを実装
nodejs+mongodb集約カスケードクエリ操作の例vue1とvue2に基づいてdom要素を取得するメソッド以上がVue ページの DOM 操作が有効にならない問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。