ホームページ > ウェブフロントエンド > jsチュートリアル > Vue ページの DOM 操作が有効にならない問題を解決する

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

亚连
リリース: 2018-05-29 16:57:51
オリジナル
3510 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート