How to display from time to time items from an array inside an array using v-for

Question

I have the following HTML with a v-for to display 3 paragraphs: Name, Details and Suite.

I need to display only 2 items at once so what I'm trying to do is display the first item on the array (ideally it should be first two items, now it's wrapped in one using \n).

Eg.

Company B

Lorem Ipsum

Dolor sit amet

After 5 seconds

Company B

Lorem Dolor Ipsum

Amet Dollor sit

<v-row
  class="pt-0 mt-0"
  v-for="item in myItemsA"
  :key="item.Name"
>
  <v-col cols="12" md="10" class="py-0 my-0">
    <p class="custom-title font-weight-regular mb-0">{{ item.Name }}</p>
    <p class="pre-formatted custom-body-1 font-weight-light mb-2">{{ item.Details }}</p>
  </v-col>
  <v-col cols="12" md="2" class="py-0 my-0">
    <p class="custom-title font-weight-regular text-center">{{ item.Suite }}</p>
  </v-col>
</v-row>


<script>
export default {
  data() {
    return: {
      myItemsA: [
        {
          Name: 'Company A',
          Details: [
            'Lorem Ipsum \nDolor sit amet',
            'Lorem Dolor Ipsum \nAmet Dollor sit',
            'Dolor amet Lorem \nAmet Sir Lorem Dolor'
          ],
          Suite: '1'
        },
        {
          Name: 'Company B',
          Details: [
            'Lorem Ipsum',
            'Dolor sit amet',
            'Lorem Dolor Ipsum',
            'Amet Dollor sit',
            'Dolor amet Lorem',
            'Amet Sir Lorem Dolor'
          ],
          Suite: '2'
        },
        {
          Name: 'Company C',
          Details: [
            'Lorem Ipsum',
            'Dolor sit amet',
            'Lorem Dolor Ipsum',
            'Amet Dollor sit',
            'Dolor amet Lorem',
            'Amet Sir Lorem Dolor'
          ],
          Suite: '3'
        },
      ],
    }
  },
  mounted() {
    setInterval(() => {
      this.updateDescription()
    }, 5000)
  },
  methods: {
    updateDescription() {
      const first = this.Details.shift();
      this.Details = this.Details.concat(first);
    },
  }
}
</script>

My code is not working. Any help?

Decade Moon · Accepted Answer · 2020-02-27 03:56:05Z

1

This kind of behaviour is easiest to achieve by creating a component that takes as input an array and displays only the items you want; that way you can encapsulate all the logic into a separate component.

Vue.component('carousel', {
  template: '#carousel',
  
  props: ['items'],
  
  data() {
    return {
      index: 0,
    };
  },
  
  computed: {
    item() {
      return this.items[this.index % this.items.length]
    },
  },
  
  created() {
    this.interval = setInterval(() => this.index++, 5000)
  },
  
  destroyed() {
    clearInterval(this.interval)
  },
})

new Vue({
  el: '#app',
  data: {
    items: [
      {
        name: 'Company A',
        details: [
          'Details A 1',
          'Details A 2',
          'Details A 3',
          'Details A 4',
        ],
        suite: 'Suite A',
      },
      {
        name: 'Company B',
        details: [
          'Details B 1',
          'Details B 2',
          'Details B 3',
        ],
        suite: 'Suite B',
      }
    ]
  }
})

.item {
  margin: 1em 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="item of items" class="item">
    <div>{{ item.name }}</div>
    <carousel :items="item.details"></carousel>
    <div>{{ item.suite }}</div>
  </div>
</div>

<template id="carousel">
  <div>{{ item }}</div>
</template>

edited Feb 27, 2020 at 3:56

answered Feb 27, 2020 at 3:50

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fabio Zanchi Over a year ago

Awesome! Thanks!

Collectives™ on Stack Overflow

How to display from time to time items from an array inside an array using v-for

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related