Question

我正在构建一个页面，其中嵌入了特定的抽搐流视频。我只会在页面顶部显示一个视频。

Twitch具有嵌入代码，可让您获取想要观看的频道，并显示嵌入式视频和聊天。它需要一个div id来定位DOM才能添加嵌入的视频。

https://dev.twitch.tv/docs/embed/everything/

我的问题是，当我单击使用相同模板的另一页时，它不会替换视频。而是将另一个IFRAME嵌入视频添加到ID。因此，每次我点击页面时，它只会将另一个视频添加到div ID中。

我正在使用watch函数来更新页面的其他元素。因此，当我使用相同的模板单击另一页时，数据将正确更新。除了嵌入的视频，一切都可以正常工作和更新。

每次单击另一页时，是否有办法清除该div ID？我事先表示歉意。我现在才学习Vuejs已有几周了，对我来说这都是新的。

这就是为什么我的模板看起来像这样：

<template>
  <div class="video heading-title container">

      <div class="streamWrapper">
        <div class="row">
          <div v-for="live in streams" class="col-12 stream-card">
            <div class="twitch-vid-wrapper">
              <div id="twitch-embed"></div>
            </div>
          </div>
        </div>
      </div>

  </div>
</template>

<script>

import appService from '../service.js'
import '../embedTwitch.min.js' // twitch video embed script

export default {
  name: 'Video',
  data: function() {
    return {
      id: this.$route.params.id,
      streams: []
    }
  },
  created() {
    this.getFirstLiveStream()
    this.getLiveStreams()
  },
  watch: {
      '$route' (to, from) {
      this.id = to.params.id
      this.getLiveStreams()
      this.getFirstLiveStream()
    }
  },
  methods: {
    getLiveStreams(game){
      game = this.$route.params.id;
      appService.getLiveStreams(game).then(data => {
        this.live = data
      });
    },
    getFirstLiveStream(game) {
      game = this.$route.params.id;
      appService.getFirstLiveStream(game).then(data => {
        this.streams = data
        let channelName = this.streams[0].channel.display_name

        appService.getTwitchStream(channelName)
      });
    }
  }
}
</script>

这是我服务的方式：

const appService = {
    getFirstLiveStream(game) {
        return new Promise((resolve) => {
            axios.get('/kraken/streams/?sort=views&stream_type=live&game='+game)
            .then((response) => {
                 // send variables to calc the offset
                 var total = response.data._total;
                 var query = this.calculateSingleOffset(game, total)
                 resolve(query)
            })
        })
    },
    getTwitchStream(channel) {
       return setTimeout(function(){ 
            new Twitch.Embed('twitch-embed', {
                width: '100%',
                height: 480,
                channel: channel
            });
        }
      , 500);
    }
}

谢谢！

Answer 1

据我了解，您需要的是如何在组件的每个实例内为一个抽搐模板分配不同的ID。

解决方案：

添加一个数据属性，例如sayHi(obj?: any)
仅使用twitchId来生成唯一的ID（此方法只是一个演示，您可以使用自己的方法来获取一个ID）。
然后绑定Date.now()，它将嵌入到抽搐视频中。

<div :id="twitchId">

Vue.config.productionTip = false

function embedContent(elementId) {
  let contents = ['I am a test', 'nothing', 'connecting', 'bla bla ...', 'Puss in boots', 'Snow White']
  document.getElementById(elementId).innerHTML = '<p>' + contents[Math.floor(Math.random()*contents.length)] + '</p>'
}

Vue.component('twitch', {

  template: `<div class="video">
    <h2>{{name}}</h2>
    <div :id="twitchId"></div>
  </div>`,
  props: ['name'],
  data() {
    return {
      twitchId: ''
    }
  },
  created: function () {
    this.twitchId = Date.now().toString(16)
  },
  mounted: function () {
    embedContent(this.twitchId)
  }
})

app = new Vue({
  el: "#app",
  data: {
    videos: [
      'channel 1',
      'World Cup for Football',
      'StackOverFlow'
    ]
  }
})

.video {
  border: 1px solid red;
}

使用相同的组件模板并更新API数据

1 个答案: