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

【问题标题】：Dynamic conditional carousel item selection in VueVue中的动态条件轮播项目选择
【发布时间】：2019-09-26 16:56:30
【问题描述】：

我正在使用 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或其他？

【问题讨论】：

我认为这不是正确的方法，这似乎是 vuetify，如果是，您可以使用插槽将视频传递到轮播，您可能需要根据数据类型进行一些条件（图片或视频）。
你的 data.content 也是无效字符串，你应该在那里使用反引号而不是单引号

标签： javascript vue.js nuxt.js

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

下面提到的答案完全一样，为什么要写两次，我有点困惑她e，这不是行为准则的一部分吗

【解决方案3】：

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

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-carousel>
          <template v-for="item in items" :key="item.id">
            <v-carousel-item v-if="item.src" :src="item.src"></v-carousel-item>
            <v-carousel-item v-else v-html="item.content"></v-carousel-item>
          </template>
        </v-carousel>
      </v-container>
    </v-content>
  </v-app>
</div>

【讨论】：