Метод цикла V-for не вызывает рендеринга напрямую - PullRequest
0 голосов
/ 01 мая 2018

Каждый раз, когда я загружаю метод loadComparison, он возвращает необходимые данные по другому элементу в сравнении, но когда запрос Axios завершается, цикл v-for выполняет повторное рендеринг с новой информацией и вызывает цикл, пока новая информация не будет получена. , Как мне по-прежнему позволять себе перебирать «сравнивать», не вызывая повторного рендеринга цикла, вызывая спам-запросы API

<v-flex v-for="(item, i) in compare" :key='i'>
  <span style="display: hidden;">{{loadComparison(item)}}</span>

метод опроса API для разных валют, которые хранятся в item.symbol

loadComparison: function(item) {
      var symbol = item.symbol;

        var webLink = 'https://api.coinMarketCap.com/v1/ticker/' + symbol + '/?convert=USD';
        axios.get(webLink)
          .then(response => {
               item.data.Volume = response.data[0]["example"];
               item.data.Change = response.data[0]["example"];
               item.data.Price = response.data[0]["example"];
               item.data.MarketCap = response.data[0]["example"]; 
          })
      }

Данные не отображаются через этот цикл V-for, который приходит позже, чтобы собрать воедино части данных для отображения из этих запросов, которые были сделаны

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

альтернативно, просто выйдите из функции раньше, если запрос axios уже был выполнен для элемента ранее.

loadComparison: function(item) {
  var symbol = item.symbol;

  if (typeof item.previouslyRequestedSymbol === "undefined") {
    // first time the request is happenning for this item
    item.previouslyRequestedSymbol = symbol;
  } else if (item.previouslyRequestedSymbol === symbol) {
    return; //exit before making request
  }

  // axios ...
}
0 голосов
/ 01 мая 2018

Мое мнение:

Вы можете использовать другое свойство данных, например cacheItems, чтобы сохранить результаты поиска. Я предпочитаю использовать один словарь (если у каждого элемента есть один уникальный ключ, это будет лучше, вам не нужно делать хэш или иначе генерировать один уникальный ключ).

Тогда все остальное просто, найдите результат из cacheItems, чтобы узнать результат по уникальному ключу.

Ниже приведен один пример (нажмите «Перезагрузить» снова и снова, чтобы увидеть результат)

app = new Vue({
  el: "#app",
  data: {
    items: 'abcdefghijklmn'.split(''),
    cacheItems: {},
    reloadCount: 0
  },
  methods: {
    reload: function () {
      this.reloadCount++
      let index=1
      console.log(this.items)
      this.items.forEach((item)=>{
        setTimeout(()=>{
          let newValue = item + item + this.reloadCount
          this.$set(this.cacheItems, item, newValue)
        }, 300*index++)
      })
    }
  }
})
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <button @click="reload()">Reload</button>
  <p v-for="(item, index) in items" :key="index">{{cacheItems[item] || item}}</p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...