Question

我正在使用Vuejs和Nuxt，并希望在旋转木马组件中沿着jpeg和png图像显示视频。轮播组件：

    <template>
    <section>
    <v-card
        class="mx-auto"
        color="#26c6da"
        dark
        max-width="1200"
    >

    <v-carousel>
        <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
    </v-carousel>

    </v-card>

    </section>

    <script>

    export default {
      data() {
        return {
          items: [  {
    id: '1',
    content: '<iframe width="560" height="315" ' +
      'src="https://www.youtube.com/embed/zjcVPZCG4sM" ' +
      'frameborder="0" allow="autoplay; encrypted-media" ' +
      'allowfullscreen></iframe>'
     },
            {
              src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
            },
            {
              src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
            },
            {
              src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
            }
          ]
        };
      }
};

    </script>

    </template>

基于答案Displaying video in Nuxt carousel component和https://codepen.io/anon/pen/MqBEqb

我需要：

<v-carousel-item v-for="item in items" :key="item.id" v-html="item.content">

观看视频和

 <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>

表示jpg。如何根据导出的数据数组中的对象动态添加1或另一个？

Answer 1

您可以在模板上使用v-for，然后再使用v-if进行检查，然后插入一个或另一个，如此处所示。

https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

https://codepen.io/autumnwoodberry/pen/qXGjXY?editors=1010

Answer 2

有一个技巧可以实现用例。您可以同时使用v-if和v-for的组合。我确实根据content或src提出了条件。此外，我为所有数据项添加了id属性。这是codepen https://codepen.io/arunredhu/pen/MdebLV

的工作链接

<v-carousel>
    <template v-for="item in items" :key="item.id">
        <v-carousel-item >
            <img v-if="item.src" :src="item.src"/>
            <div class="video-elem" v-if="item.content" v-html="item.content"></div>
        </v-carousel-item>
     </template>
</v-carousel>

Answer 3

您可以使用模板和 v-if ='item.src'

class CategoryRelation extends Model
{
    protected $table = 'categories_relationship';
}

Vue中的动态条件轮播项目选择

3 个答案: