Свойство VueJs не отображается в шаблоне, но существует в данных

Question

Привет, ребята. У меня проблема с vueJS.

В созданном хуке у меня есть это:

created() {
      var allDocs = [];
      for (var [key, value] of Object.entries(this.docs)) {
        allDocs.push(value);
      }
      allDocs = allDocs.flat();
      allDocs.forEach((doc)=>{
        var data = {parent:doc.code}
        axios.post('/api/v1/getconnumber', data)
        .then((response)=>{
          doc.datas.conventions = response.data
        });
      });
      this.newDocs = allDocs;
    }

И свойство существует в данных:

Но когда я хочу отобразить свойство в шаблоне, оно ничего не показывает, я устал записывать результат из шаблона, который дает мне undefined, я уверен, что этопроблема async , но я не могу понять, как ее исправить.

Answer 1

Здесь необходимо решить несколько проблем.

Вызов axios является асинхронным, поэтому в тот момент, когда функция created завершает выполнение обратного вызова then, вызываться не будет. Остальная часть кода будет запущена, поэтому newDocs будет присвоено значение, это просто свойство conventions, которое не было установлено.

Затем компонент визуализируется. На данный момент conventions будет undefined, как вы заметили. Чтобы избежать этого, вы ничего не можете сделать, вам просто нужно написать свой шаблон для обработки отсутствующих данных. Существуют различные способы перетаскивания проблемы таким образом, чтобы она решалась в другом месте, но в конечном итоге что-то должно с ней справиться.

Затем вызовы axios будут возвращаться один за другим. Когда каждый вызов завершается, он обновляет свойство conventions для этого конкретного объекта.

Теоретически это вызывает систему реактивности и вызывает повторную визуализацию компонента. Однако, чтобы это произошло:

1. Объекты datas должны быть реактивными.
2. Свойство conventions должно уже существовать в этих объектах. См. https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats

Вероятно, условие 1 уже выполнено. В вопросе неясно, где именно определены свойства docs и newDocs, но я предполагаю, что docs - это опора, а newDocs - локальное data свойство. Здесь есть много тонких нюансов, когда дело доходит до определения того, будет ли datas реагировать, но если у вас объявлено newDocs в вашей функции data, то с вами все будет в порядке. Вам может это сойти с рук, даже если у вас нет объявленного там, но я бы все равно предложил включить его.

data () {
  return {
    newDocs: null
  }
}

Скорее всего, ваша проблема связана с тем, что свойство conventions не существует, когдаdatas изначально сделан реактивным. Простейшим решением здесь является использование Vue.set или $set:

this.$set(doc.datas, 'conventions', response.data)

Используя $set, вы не только установите значение свойства, но и сделаете его реактивным. Это позволит ему запускать шаблон, чтобы вы увидели новое значение.

Все это говорит о том, что обновлять свойство conventions таким образом кажется немного странным. Кажется вероятным, что он обновляет объект, принадлежащий родительскому компоненту, что обычно не рекомендуется. Альтернативные решения включают использование вычисляемого свойства или создание справочной карты для соглашений.

Answer 2

У меня была похожая проблема с вызовами axios в цикле for. Попытайтесь поместить ваше назначение «this.newDocs = allDocs;» после того, как ваши запросы будут завершены.

Я сделал это с помощью наблюдателя для переменной, которая считалась до размера моего максимального числа циклов for. Или вы можете попытаться вставить его в "then ((response) => {...}".