@choupa
Архитектор (обычный, который строит)

Как получить доступ к DOM элементу в такой ситуации?

HTML:
<figure v-show = "( page === 'calculation ')">
	<canvas id="canvas"></canvas>
</figure>


JS:
var vm = new Vue ({
	data:	{
		page: 'order'
	},
	methods: {
		changeActivePage: function ( page )	{
			this.page = page;
			// В этот момент <figure> ещё в состоянии display:none, поэтому оказывается, что размеры <canvas> нулевые
			console.log( picture )  // <canvas ... width="0" height="0">
		
			...
		}
	}
}

var picture = document.getElementById ( 'canvas' );
vm.changeActivePage( 'calculation' );


В figure-элементе, включаемом по v-show, находится canvas, которому в CSS заданы размеры 100%х100%. Включаю figure вызовом функции changeActivePage( 'calculation' ). При переключении страниц мне необходимо инициализировать содержимое canvas и нужно получить его размеры. Однако если я пытаюсь сделать это в функции changeActivePage( 'calculation' ) размеры canvas ещё нулевые. Это и понятно, страница ещё не отрендерена.

Как быть? Как мне запустить мою инциализацию canvas, когда он приобретёт нормальные размеры, т.е. после рендера?
  • Вопрос задан
  • 153 просмотра
Пригласить эксперта
Ответы на вопрос 1
nuykon
@nuykon
Full Stack Developer
Вам уже ответили выше правильно, лишь дополню:
https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
https://vuejs.org/v2/api/#mounted
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы