使用for循环显示的图片和youtube视频

时间:2019-06-22 10:35:04

标签: json vuejs2

我有一个JSON数组,该数组具有指向图像和youtube视频的url链接。我编写了两个for循环来获取此数据,因为youtube视频需要嵌入到iframe中。有没有一种可能的方法来重组JSON并有一个for循环,因为这样我就可以使用它来滑动元素了。

keynotes: [
        {
          media: [
            {
              image: "../images/example.png",
              youtube: "youtube link"
            }
          ],
          headline: "Lorem Impsum",
          content:"Lorem Impsum"
        }
      ]
<transition-group class="carousel">
  <div v-for="(mediaelement, mediaelementID) in keynote.media" :key="mediaelementID">
   <img class="inline-block" :src="mediaelement.image">
  </div>
  <div v-for="(mediaelement, mediaelementID) in keynote.media" 
     :key="mediaelementID" class="youtube">
   <iframe class="inline-block" width="295" height="197" 
      :src="mediaelement.youtube"></iframe>
  </div>
</transition-group>

0 个答案:

没有答案