时间戳

首页 > 解决方案 > Vue：使用 VueJS 不会触发 Twitch 播放器事件？

javascript - Vue：使用 VueJS 不会触发 Twitch 播放器事件？

问题描述

我正在使用 Twitch API，特别是嵌入。我想嵌入一个播放器，所以我有这个：

var options = {
  width: 400,
  height: 300,
  channel: "twitchpresents"
};
var player = new Twitch.Player("SamplePlayerDivID", options);

const v = new Vue({
  el: "#app",
  methods: {
    init: function() {
      player.addEventListener(Twitch.Player.READY, () => {
        alert("Player is ready!!");
      });
    }
  },
  mounted: function() {
    this.init();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://player.twitch.tv/js/embed/v1.js"></script>

   <!-- <div id="SamplePlayerDivID"></div> ALERT() ONLY FIRES IF HERE -->
<div id="app">
  <div id="SamplePlayerDivID"></div>
</div>

嵌入工作，它播放，（虽然可能不在片段中）但问题是，由于某种原因，如果我将抽搐保持在<div id="SamplePlayerDivID"></div>内#app，事件永远不会触发。事实上，如果我将播放器绑定到window，则正常播放器方法都不起作用，例如player.getChannel().

只有当我将它从 vue 实例中取出时，它才能工作......我怎样才能在将事件保留在内部#app（没有组件）的同时触发事件，为什么这首先会发生？

我尝试v-pre在播放器 div 上使用来尝试忽略它，以便事件正常触发，但这不起作用。

Codepen：https ://codepen.io/anon/pen/MPErqY?editors=1010

标签： javascriptvue.jstwitch

解决方案

推荐阅读