Как заставить директиву Vue заново рендериться?

Question

[Leatington]

Пытаюсь сделать колонки в v-data-table динамичными, чтобы можно было менять их размер, но мои колонки также можно отключать через v-select, из-за чего сразу директива v-resizing не применяется. Как заставить её обновляться после изменения параметра в v-select.

Залил на Codepen для удобства, активируйте первые два пункта в v-select (этого будет достаточно) - колонки изменять будет нельзя (должно перерисовываться). Обновите страницу - эта возможность появится. Заранее спасибо за помощь.

Comments

[Aetae]

Вообще сейчас влома смотреть что там, за что прошу прощения, но универсальный ответ на перерендер vue - поставить компоненту\тегу key и менять его на уникальный в соответствии с необходимостью.)

Answer 1

[Leatington]

Проблему решил добавлением ключа и изменяя его при добавлении, но есть другая проблема, при загрузке страницы это происходит так:

Но если нажать по любому разделителю (чтобы сработало событие mouseup), становится всё в порядке:


Казалось бы, должно быть отличие в переменных, что вызывало бы такое, но отличий нет. Вот фрагмент этого кода:

inserted: (el, binding) => {
	Vue.nextTick(function () {
		const table = el.children[0].children[0];
		table.style.position = 'relative';

		const thead = table.querySelector('thead');
		const ths = thead.querySelector('tr').querySelectorAll('th');

		const barHeight = table.offsetHeight;

		const resizeContainer = document.createElement('div');
		resizeContainer.className = 'vue-columns-resizable';
		resizeContainer.style.position = 'relative';
		resizeContainer.style.width = (table.offsetWidth + 'px');
		table.parentElement.insertBefore(resizeContainer, table);

		let moving = false;
		let movingIndex = 0;

		ths.forEach((th, index) => {
			th.style.width = (th.offsetWidth + 'px');
		
			if ((index + 1) >= ths.length) {
				return;
			};

			const bar = document.createElement('div');

			bar.style.background = 'red';
			bar.style.position = 'absolute';
			bar.style.left = (ths[index + 1].offsetLeft - 4) + 'px';
			bar.style.top = 0;
			bar.style.height = barHeight + 'px';
			bar.style.width = '4px';
			bar.style.cursor = 'col-resize';
			bar.style.zIndex = 1;
			bar.className = 'columns-resize-bar';

			bar.addEventListener('mousedown', () => {
				moving = true;
				movingIndex = index;
				
				document.body.style.cursor = 'col-resize';
				document.body.style.userSelect = 'none';
			});

			resizeContainer.appendChild(bar);

			console.log(index)
		});

		const bars = resizeContainer.querySelectorAll('.columns-resize-bar');

		document.addEventListener('mouseup', () => {
			if (moving) {
				moving = false;
				
				document.body.style.cursor = '';
				document.body.style.userSelect = '';

				bars.forEach((bar, index) => {
					const th = ths[index];
					const nextTh = ths[index + 1];
					console.log(bar.style.left);
					th.style.width = th.offsetWidth + 'px';
					bar.style.left = nextTh.offsetLeft - 4 + 'px';
					console.log(bar.style.left);
				});
			}
		});
	});
}

Comments

[Aetae]

Это уже другой вопрос по сути.
Но я предполагаю, что вон тот вон json-чик в колонке Server прилетает несколько позже, чем случается nextTick.
Возможно тебе надо добавить в директиву MutationObserver и, может быть, ResizeObserver, чтоб всё было динамично. Или вместо директивы сделать компонент-обёртку и работать с логикой в Vue, а не вручную. Тут не скажу какой поход лучше, ибо всё ещё лень вникать.)

[Leatington]

Aetae, да, действительно дело было в Json, а я этого не видел, даже визуально покрасив колонки.. Спасибо!

[Aetae]

Leatington, кстати не забывай делать document.removeEventListener('mouseup', ...), а то слушатели в процессе жизни приложения будут всё накапливаться и накапливаться. На всякий случай.)