Многочисленные вызовы axios в цикле, даже если для vue.js

#html #vue.js #axios

#HTML #vue.js #axios

Вопрос:

Когда выбрано значение ratio, запускается многомерный цикл. Однако все работает нормально .. функции также вызываются на основе имени ключа заказа. Вот тут-то все становится сложным и тормозит.

$parent[key]() вызывает правильную функцию и пытается вернуть данные json. Странная вещь, которая происходит, заключается в том, что axios вызывает сервер множество раз (3000-4000 раз, пока он не затормозит) при $parent.item_set.ratio изменении.

В целях тестирования я отключил все, кроме одного с id === 0 .

 <select v-model="$parent.item_set.ratio">
  <option disabled value="">Please select</option>
  <option v-for="(ratios, index) in $parent.items[$parent.item_set.item].mods[$parent.item_set.mod].options[$parent.item_set.option].ratios" :value="ratios.join(', ')">@{{ ratios.join(', ') }}</option>
</select>


<div v-if="$parent.item_set.ratio">
  <div v-for="(order, key, id) in $parent.items[$parent.item_set.item].mods[$parent.item_set.mod].orders">

    <div v-if="id === 0">
        <select v-model="$parent.item_set.orders[key]">
           <option disabled value="">Please select</option>
           <option v-for="(value, index) in $parent[key]()">@{{ value }}</option>
        </select>
    </div>

  </div>
</div>

Axios

 function_key_name() {
  this.loader('function_key_name', 'random?query=data');
  return this.item_settings.function_key_name;
},


loader(a, b) {
  this.parts(a '/' b).then((json) => {
     this.item_settings[a] = json.data;
  }).catch(error => {
     // alert(error.response.data.message);
  });
}

Спасибо за любые ответы.

1.Я думаю, проблема в том, что вы вызвали функцию внутри v-for $parent[key]()

2. @varit05 это тоже было моим предположением, но даже если я не вызываю функцию в цикле, но вызываю извне, это вызывает у меня ту же проблему .. :/ однако .. если я делаю что-то подобное, но с помощью on: click это работает

3. Возможно ли скопировать вставить код в codesandbox, чтобы я мог изучить это?

4. @varit05 не совсем, потому что это только одна часть огромного сложного кода и логики. Но это та часть, где это тормозит.

5. @varit05 мне удалось это исправить. Проблема действительно была с $parent[key](). Технически говоря, с этим вообще нет проблем, но проблема заключалась в том, как это должно работать. Мне удалось исправить это, заменив этот вызов функции на basic $ parent.settings [key] и инициировав вызов функции при предыдущем событии изменения индекса. Это сделало свое дело. Ваш комментарий был правильным, поэтому, если бы вы могли указать это в качестве ответа, я был бы в состоянии принять как правильный ответ.

Ответ №1:

Проблема, похоже, в вызове функции $parent[key]() в v-for цикле.

Это можно исправить, заменив этот вызов функции на basic $parent.settings [key] и инициировав вызов функции при предыдущем событии изменения индекса.

 <option v-for="(value, index) in $parent[key]">@{{ value }}</option>

Рад, что это сработало!

1. Хорошее место, хороший человек, спасибо. Но если вы можете, измените asnwer на что-нибудь из того, что я написал. Это было бы лучше.

2. Обновлен ответ! Если вы все еще думаете, вы можете отредактировать ответ 🙂