@Rokis
Не стыдно спрашивать, стыдно не пытаться...

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

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

Переношу комментарии со статического 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>
  • Вопрос задан
  • 1516 просмотров
Решения вопроса 1
Fzero0
@Fzero0
Вечный студент
Ну допустим так например
Файл 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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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