@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]);
			}
		}
	})();
});
  • Вопрос задан
  • 253 просмотра
Пригласить эксперта
Ответы на вопрос 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Ну видимо когда вы первый раз загружаете у вас этот компонент показывается, потом когда вы переходите на другой компонент, этот удаляется из дом, а когда возвращаетесь, то не происходит повторный запуск скрипта для виджета.
Ответ написан
Ваш ответ на вопрос

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

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