Что именно является причиной блокировки виджета новостей вк?

Question

[StanleyShilow]

Основное:
- Использую vue cli,
Суть:
При первой загрузке виджет функционирует, но стоит мне прогуляться по компонентам и вернуться обратно, - виджет пропадает. При переходе по роутам консоль ничего не выдает(.

- Отображаю в app три разных компонента. В news.vue должен быть виджет новостей вк:

<template>
  <div class="news">
    <h1>{{ msg }}</h1>
   <div id="vk_widget-news" class="vk_widget"></div>
  </div>
</template>

<script>
export default {
  name: 'news',
  data () {
    return {
      msg: 'Welcome to news'
    }
  }
}
</script>

скрипт для виджета:

var vkWidgetList = document.querySelectorAll('.vk_widget');
var vkCounter = vkWidgetList.length + 1;

function vkWidgetNewsInit(vkWidgetContainer, containerWidth) {
	var container = vkWidgetContainer;
	var vk_groups = document.createElement('div');
	vk_groups.setAttribute('id', 'vk_groups' + (vkCounter = vkCounter - 1));

	container.innerHTML = '';
	container.appendChild(vk_groups);

	VK.Widgets.Group(
		vk_groups.getAttribute('id'), {
			mode: 4,
			no_cover: 1,
			color3: 'D42B36',
			width: containerWidth
		},
		85625026
	);
}

function vkWidgetGroupInit(vkWidgetContainer, containerWidth) {
	var container = vkWidgetContainer;
	var vk_groups = document.createElement('div');
	vk_groups.setAttribute('id', 'vk_groups' + (vkCounter = vkCounter - 1));

	container.innerHTML = '';
	container.appendChild(vk_groups);

	VK.Widgets.Group(
		vk_groups.getAttribute('id'), {
			mode: 4,
			no_cover: 1,
			color3: '507299',
			width: containerWidth
		},
		85625026
	);
}


function vkWidgetInit(vkWidgetContainer) {
  
	var containerWidth = vkWidgetContainer.clientWidth;
	var containerId = vkWidgetContainer.getAttribute('id');

	switch (containerId) {
		case 'vk_widget-news':
			vkWidgetGroupInit(vkWidgetContainer, containerWidth);
			break;
		case 'vk_widget-group':
			vkWidgetNewsInit(vkWidgetContainer, containerWidth);
			break;
	}
}

document.addEventListener("DOMContentLoaded", function() {
	for (var i = 0, length1 = vkWidgetList.length; i < length1; i++) {
		vkWidgetInit(vkWidgetList[i]);
	}

(function() {
		window.addEventListener("resize", resizeThrottler, false);

		var resizeTimeout;

		function resizeThrottler() {
			if (!resizeTimeout) {
				resizeTimeout = setTimeout(function() {
					resizeTimeout = null;
					actualResizeHandler();
				}, 66);
			}
		}

		function actualResizeHandler() {
			for (var i = 0, length1 = vkWidgetList.length; i < length1; i++) {
				vkWidgetInit(vkWidgetList[i]);
			}
		}
	})();
});

Answer 1

[Evgeny Kulakov]

Ну видимо когда вы первый раз загружаете у вас этот компонент показывается, потом когда вы переходите на другой компонент, этот удаляется из дом, а когда возвращаетесь, то не происходит повторный запуск скрипта для виджета.

Comments

[StanleyShilow]

Спасибо большое, хоть буду знать где у бабушки потеря.

[Evgeny Kulakov]

StanleyShilow, это было предположение) пробуйте

[Dima Polos]

Попробуйте компонент, который пропал обернуть в спец тег keep-alive. Только осторожно, для теста, сначала)

[StanleyShilow]

Evgeny Kulakov, есть мысль, что асинхронная загрузка все исправит, но у меня пока не получилось это реализовать...

[StanleyShilow]

Dima Polos, спасибо, однако только что опробовал и часа четыре назад пробовал... никак.. что хлеб, что мякиш...( обернул просто в тег..

<keep-alive>
   <div id="vk_widget-news" class="vk_widget"></div>
</keep-alive>

Дима, а у вас наверняка был опыт использования keep-alive, если да, то как вы реализовали?

[StanleyShilow]

Друзья, выражаю вам особую благодарность, что навели на праведные мысли) Dima Polos Решение оказалось более чем лаконичным. Нужно было всего-то зафиксировать router и, все. Можно спокойно спать. YEAH!!!!

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
    <router-link to="/">Home</router-link>
    <router-link to="/news">News</router-link>
    <router-link to="/about">About</router-link>
    </div>
    <keep-alive>
    <router-view/>
    </keep-alive>
  </div>
</template>

[Dima Polos]

StanleyShilow, поздравляем, искренне рад! :) Успехов в дальнейшем!

[StanleyShilow]

Нифига, это решение не работает, а keep-alive имеет немного иное назначение: благодаря которому можно фиксировать инфу в инпутах, например. Удовлетворяющего меня решения так и не нашел, пришлось заюзать перезагрузку при клике :(

<router-link to="/news" onClick="window.location.reload()">news</router-link>

[Evgeny Kulakov]

Почему просто не вызвать этот скрипт в mounted вашего компонента.