Vue ページの DOM 操作が有効にならない問題を解決する

以下に、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 サイトの他の関連記事を参照してください。