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

Question

[Николай Чуприк]

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, когда он приобретёт нормальные размеры, т.е. после рендера?

Answer 1

[Сергей Левченко]

Вам уже ответили выше правильно, лишь дополню:
https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
https://vuejs.org/v2/api/#mounted