Как я могу динамически менять компонент Vue в зависимости от времени? Под изменением я имею в виду, что один заменяет другой, как в карусели - PullRequest
Новая
       22

Как я могу динамически менять компонент Vue в зависимости от времени? Под изменением я имею в виду, что один заменяет другой, как в карусели

0 голосов
/ 31 августа 2018

Я бы хотел, чтобы некоторые виджеты, которые есть на моем сайте Vue, менялись каждые n секунд. Каков наилучший способ архивировать это? Под изменением я подразумеваю, что один заменяет другой, как в карусели.

1 Ответ

0 голосов
/ 01 сентября 2018

Вот пример CodeSandbox .

Вы можете изменить отображаемый виджет (re: component), установив интервал и привязку динамические компоненты . 

<template>
  <component :is="active"></component>
</template>

<script>
  import ComponentA from "./components/ComponentA";
  import ComponentB from "./components/ComponentB";
  import ComponentC from "./components/ComponentC";

  export default {
    name: "App",
    components: {
      ComponentA,
      ComponentB,
      ComponentC
    },
    data () {
      return {
        rate: 5,
        active: 'component-a',
        interval: null,
        components: ['component-a', 'component-b', 'component-c']
     }
   },
   mounted () {
     this.interval = setInterval(this.rotate.bind(this), this.rate)
   },
   methods: {
     rotate () {
       const index = this.components.findIndex(component => component === this.active)

       this.active = ((index + 1) === this.components.length) ? this.components[0] : this.components[index + 1]
     }
   }
</script>
...