После зацикливания элементов массива снова зациклите их новыми данными, используя таймер

1

У меня есть очень простой цикл v-for, который извлекает данные из Axios и отображает их в кинохронике, которая будет показывать каждую новость, одну за другой, автоматически. Это прекрасно работает, но через несколько минут у него заканчиваются элементы и отображается пустой элемент div, поскольку в API есть только около 30 новостей.

Что мне нужно

После того, как в массиве v-for заканчиваются элементы, я просто хочу перезапустить его. Извлеките API (поскольку элементы API меняются каждые 30 секунд), а затем повторно запустите массив v-for без необходимости обновления страницы пользователем.

Вызов Axios, который показан ниже

axios.get('https://myapi/news_list')
   .then(response => {
        this.news = response.data
   });

шаблон

<ul class="news-reel">
    <li v-for="name in news">

       <a :href="name.url">{{name.title}}</a>

    </li>
</ul>

** РЕДАКТИРОВАТЬ **

Когда я говорю, что он показывает каждый элемент автоматически, у ul просто есть анимация класса, которая прокручивает (или скользит) новостные элементы, например, ролик шатер новостей. Все это.

  • 2
    Я не уверен, что мы видим достаточно, чтобы получить хорошее представление о том, что вы описываете. Похоже, вы говорите, что где-то есть таймер, но мы не видим ничего подобного, поэтому сложно назначить решение.
  • 0
    Это просто очень простой класс <ul>, который прокручивает элементы как новостной ролик. Я добавил больше в редактировании.
Теги:
arrays
vue.js
vuejs2
axios

1 ответ

2
Лучший ответ

Вы можете использовать таймер, который вы инициализируете в created хуке, например:

 created(){
      setInterval(()=>{
            axios.get('https://myapi/news_list')
               .then(response => {
                    this.news = response.data
               });
        },30000);
      }

Полный пример для симуляции

new Vue({
  el: '#app',
  data() {
    return {
      news: [],
      index: 0
    }
  },
  computed: {
    cptNews() {
      return this.news.map((n, i) => {
        let t = n;
        t.id = i;
        return t;
      })
    }
  },
  created() {
    setInterval(() => {

      let n = {};
      n.title = "News " + this.index;
      n.url = "https://myapi/news_list/" + this.index;
      this.news.push(n)
      this.index++;
    }, 4000);
  }
});
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul class="news-reel">
      <li v-for="name in cptNews">
        <span>{{name.id}}</span>
        <a :href="name.url">{{name.title}}</a>

      </li>
    </ul>
  </div>
</body>

Ваш код должен быть таким (не нужно mounted):

data() {
    return {
      news: []

    };
  },
  created() {
    setInterval(() => {
      axios.get('https://myapi.co/news/')
        .then(response => {
          this.news = response.data.data
        });

    }, 4000);
  }
Поделиться
  • 0
    Это не работает, я просто вставил ваш код, и он каждые 30 секунд повторно вызывает API во вкладке сети разработчика Chrome, но на самом деле он не перезапускает массив v-for и не обновляет текущий v-for. массив.
  • 0
    и если вы проверите vue devtools, что такое содержимое массива news ?
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню