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

Question

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

$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>

Вардар

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);
  });
}

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

Answer 1

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

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

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

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