Карусель с использованием чистого Vue JS

Question

У меня есть массив, который содержит объекты.Каждый объект описывает социальное событие.

const social_events = [

    {name:'Musical show',location:'Colombo'},
    {name:"DJ Party",location:'New york'},
    {name:"Dinner dance",location:"Paris"}
]

То, что я хочу сделать, это ОТОБРАЗИТЬ ОДИН СОЦИАЛЬНЫЙ СОБЫТИЕ В ТЕЧЕНИЕ ВРЕМЕНИ внутри тега div.потому что это точно так же, как карусель, ожидайте, что карусель для изображений это для текстов.

Я также хочу менять свой текст каждые 15 секунд.

Я думаю, что это что-то с setTimeout иcomputed properties.Как мне добиться этого какой-либо подсказкой?

Answer 1

Вы можете использовать вычисляемое свойство и setInterval .

data () {
    return {
        i: 0,
        socialEvents: [
            {name:'Musical show',location:'Colombo'},
            {name:"DJ Party",location:'New york'},
            {name:"Dinner dance",location:"Paris"}
        ]
    }
},
created () {
    setInterval (() =>{
        this.i++
    }, 15000)
},
computed: {
    displayingEvent () {
        return this.socialEvents[this.i % this.socialEvents.length]
    }
}

1. Подсчитывать число i каждые 15 секунд, используя setInterval
2. Вычислить отображение события.Вы можете использовать i mod 3 в качестве индекса отображаемого события

Answer 2

Эта ссылка может помочь мне использовать setInterval, вы можете изменить время на 15000

https://codepen.io/vibrates09/pen/KGemqQ?&editors=101

count() {
  let i = 0
  setInterval(() => {
    this.show = this.socialEvent[i]
    i++;
    i === this.socialEvent.length ? i = 0 : i
  }, 1000)
}