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?

Answer 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>