Vuejsで単一ファイルコンポーネントで要素の高さを動的に取得したい

Question

要素の高さを取得するthis.$el.get...はmountedでしか使うことができません。

それによってフェートインや他の効果によって高さが変わるとmountedで取得した値とずれてアニメーションがうまくいきません。

どのようにすれば取得できるでしょうか？

Answer 1

Vue単体では厳しいと思いますので、mountedかcreated時にリサイズイベントを取得出来るようにするといいと思います。

window.addEventListener( "resize", () => {
	clearTimeout( timeoutId ); // 300ms遅延（連続で変わる際の対策）

	timeoutId = setTimeout( () => {
		this.hoge(); // ここでリサイズ時のメソッドを実行
	}, 300);
});

Comments

[退会済みユーザー]

Vue.jsだけでは厳しいのですか、、、何かしらWrapperなどで固定しておかないといけないのですね、、、
勉強になりました。
ありがとうございました。