CODEWITHSUNDEEP
javascriptvuejs2vue-component
francky
francky

Reputation: 177

Make a different display in a dynamic Vue component

thank you in advance for your help.

I have a dynamic component like this

<div>
        <component
          :is="picture.template"
          v-for="picture in enabledPictures"
          :key="picture.title"
          :params="picture"
          :size="params.size"
          @click="onClick(picture)"
        />
    </div>
export default {
components: {
    VueSlickCarousel: () => import('vue-slick-carousel'),
    BannerOne: () =>
      import('./components/BannerOne/BannerOne'),
    BannerTwo: () =>
      import('./components/BannerTwo/BannerTwo')
  },
}

I would like to manage in this template mobile and desktop display

the desktop display is ok both components have the same display

but in mobile I would like to display the bannerOne in carousel and not the bannerTwo I did that

  <div>
    <div v-if="isMobile">
      <vue-slick-carousel :arrows="true" :dots="true">
        <component
          :is="picture.template"
          v-for="picture in enabledPictures"
          :key="picture.title"
          :params="picture"
          :size="params.size"
          @click="onClick(picture)"
        />
      </vue-slick-carousel>
    </div>
    <div v-else>
        <component
          :is="picture.template"
          v-for="picture in enabledPictures"
          :key="picture.title"
          :params="picture"
          :size="params.size"
          @click="onClick(picture)"
        />
    </div>
</div>
export default {
components: {
    VueSlickCarousel: () => import('vue-slick-carousel'),
    BannerOne: () =>
      import('./components/BannerOne/BannerOne'),
    BannerTwo: () =>
      import('./components/BannerTwo/BannerTwo')
  },
}

but when I do that in mobile, the 2 components are in carousel how to do? please help! thanks you

Upvotes: 0

Views: 183

Answers (1)

Robbert Lokhorst
Robbert Lokhorst

Reputation: 61

You could filter the enabledPictures array and display them separately when isMobile is true.

var app = new Vue({
  el: '#app',
  data () {
    return {
      isMobile: true,
      groups: [{
        template: 'div',
        title: 'I am a <div> tag'
      }, {
        template: 'span',
        title: 'I am a <span> tag'
      }, {
        template: 'div',
        title: 'I am a <div> tag'
      }, {
        template: 'span',
        title: 'I am a <span> tag'
      }, {
        template: 'div',
        title: 'I am a <div> tag'
      }, {
        template: 'span',
        title: 'I am a <span> tag'
      }]
    };
  },
  computed: {
    groupOne () {
      return this.groups.filter(item => item.template === 'div' )
    },
    groupTwo () {
      return this.groups.filter(item => item.template === 'span' )
    }
  }
});
#app div {
  background: red;
}

span {
  background: blue;
  display: block;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="isMobile = !isMobile">Toggle mobile</button>

  <template v-if="isMobile">
    <component :is="group.template" v-for="(group, i) in groupOne" :key="`one-${i}`">
      {{ group.title }}
    </component>
    <component :is="group.template" v-for="(group, i) in groupTwo" :key="`two-${i}`">
      {{ group.title }}
    </component>
  </template>
  <component v-else :is="group.template" v-for="(group, i) in groups" :key="`all-${i}`">
    {{ group.title }}
  </component>
</div>

Upvotes: 1

Related Questions