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

Posted 2023-02-23

【中文标题】使用相同的组件模板并更新 API 数据

【英文标题】：Using the same component template and updating the API data

【发布时间】：2018-12-21 06:00:30

【问题描述】：

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

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

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

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

我正在使用监视功能来更新页面的其他元素。因此，当我使用相同的模板单击另一个页面时，数据会正确更新。除了嵌入视频之外，一切正常并更新。

有没有办法在我每次点击另一个页面时清除该 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);
    

谢谢！

【参考方案1】：

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

解决办法：

添加一个数据属性，如twitchId

简单地使用Date.now()生成唯一id（此方法只是一个demo，你可以使用自己的方法得到一个id）。

然后绑定<div :id="twitchId">，它将嵌入到twitch视频中。

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',
      '***'
    ]
  
)

.video 
  border: 1px solid red;

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <div>
    <twitch v-for="(item, index) in videos" :name="item" :key="index"></twitch>
  </div>
</div>