Как интегрировать комментарии VK в vuejs?

Question

[Rokis]

Здравствуйте.

Переношу комментарии со статического html на страницу Vuejs. Комментарии подгружатся к странице в виде отдельного компонента. Вроде бы работает, но не определяется api id. Получаю пустой блок. Как сделать чтобы id определялся? Пробовал различные варианты, куда только не засовывал его. Всё равно пустой блок.

Вот код моего компонента:

<template>
<div id="vk_comments">
<script ref="vk_comments">
</script>
</div>
</template>

<script>
export default {
head() {
      return {
   script: [
      { src: '//vk.com/js/api/openapi.js?95'}
    ]
  }
  },
    mounted() {
      //if (process.document) {
        const container = this.$refs.vk_comments
        console.log('created', this.$refs, container)//*/
        container.innerHTML = 'VK.init({apiId: 3333333, onlyWidgets: true});VK.Widgets.Comments("vk_comments", {limit: 20, attach: "graffiti,photo,video,audio"})'
      //}
	  
    }
	}
</script>

Answer 1

[Виктор Л]

Ну допустим так например
Файл vknt.js

const API_ID = 68 // код свой;

export function injectVKOpenApi() {
  return new Promise((resolve, reject) => {
    try {
      const fjs = document.getElementsByTagName("script")[0];
      if (document.getElementById("vk_openapi_js")) {
        resolve();
        return;
      }
      const js = document.createElement("script");
      js.id = "vk_openapi_js";
      js.src = "//vk.com/js/api/openapi.js?160";
      js.onload = resolve;
      js.onerror = reject;

      fjs.parentNode.insertBefore(js, fjs);
    } catch (err) {
      reject(err);
    }
  });
}

/**
 * This initializes the VK api
 * @param {boolean} onlyWidgets
 */
export const initVK = (onlyWidgets = false) => () =>
  VK.init({ apiId: API_ID, onlyWidgets });

export const initCallVK = () =>
  new Promise((resolve, reject) => {
    try {
      window.name = "fXD";
      VK.init(resolve);
    } catch (err) {
      reject(err);
    }
  });

Файл компонента VkComment.vue

<template>
  <div><div id="vk_comments"></div></div>
</template>

<script>
import { injectVKOpenApi, initVK } from "./vknt.js";

export default {
  name: "vk-comments",
  props: {},
  mounted() {
    injectVKOpenApi()
      .then(initVK(true))
      .then(() => {
        VK.Widgets.Comments("vk_comments", { limit: 5, attach: "*" });
      });
  }
};
</script>

Comments

[Виктор Л]

Смотреть тут

[Rokis]

Спасибо. Попробовал Ваш способ. Но блок всё равно пустой. ID выставил естественно свой. Смотрю в коде браузера - там нет от вк кода. Да я даже руками пробовал в html файл вставлять этот код. Результат тот же. Хотя на html сайте (с которого нужно перенести) отображается нормально.

[Виктор Л]

ну загрузите код в песочницу https://codesandbox.io посмотрим

[Виктор Л]

или посмотрите вот развернул в песочнице все работает

консоль что пишет? может вы когда в контакте создавали коменты указали один домен а разворачиавете все на другом?

[Rokis]

Виктор Л,
Тестирую на том же домене, но на другом сервере (через перенаправление IP в файле host). В консоли никаких предупреждений и ошибок связанных с vk нет. Поменял ID на случайный - появилась ошибка "Invalid application domain" и блок не загружается. Попробовал создать новый виджет и вписать ID в вашу песочницу. Работает. Возможно заработает на основном сервере (к сожалению сейчас не могу проверить т.к. проект не до конца готов).