問題タブ [vue-events]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1397 参照

vue.js - vue.js は、mounted() フックで更新されません

編集:解決済み、回答を参照してください。

したがって、私は vue.js と quasar を初めて使用するので、おそらく vue ライフサイクル フックと vue 反応性に関する初歩的な間違いです。

ブラウザのサイズに基づいて要素のサイズを変更したい。この要素の高さは、他の要素の高さを使用して計算されます。$refs を使用して他の要素の高さを取得し、quasar コンポーネントによって開始された onResize() イベントをキャプチャします。

このイベントは、ページの読み込み時に 1 回起動されます。DOM でまだレンダリングされていないと思われるため、要素のサイズはすべて 0 です。「onResize」イベントがキャプチャされたとき、および「mounted()」vue.jsフックでも呼び出す、計算された高さを更新するメソッドがあります。

私の問題は:

  • 最初の onResize() はメソッドを呼び出しますが、すべての要素の高さは 0px です。
  • Mounted() メソッドが再度呼び出され、ここですべての要素の高さが計算されます。結果は良好ですが、ディスプレイには表示されません。スクリーンショット #1 を参照してください: サイズ変更イベントとコンソールに記録されたサイズ。サイズは 2 回計算されることに注意してください。Mounted() のものは価値がありますが、DOM には表示されません。

スクリーンショット #1 - 全画面表示、最初の読み込み、サイズが正しくありません

  • ウィンドウのサイズを一度変更すると、すべて問題なく、もう問題はありません。(スクリーンショット #2 (ウィンドウ モード) と #3 (再びフルスクリーン))

スクリーンショット #2 - ウィンドウ、サイズ OK スクリーンショット #3 - フルスクリーン - サイズ OK

私の質問は、正しく計算されていても、mounted() フックが呼び出されたときに DOM で高さが更新されないのはなぜですか? (すべてが同じ .vue ファイルにあります)

私のコード:私の問題は、「tableRow」refを持つdivの高さにあります

脚本: