Блог

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

Проблема в том, что data заполняется только после вызова API, выполненного путем отправки формы.

Консоль браузера читает Error in render: "TypeError: Cannot read property 'response' of undefined"

Если я закомментирую {{classes.data.response}} , форма отобразится, но не будет в противном случае.

Вот как выглядит код.

 <template>
  <div class="container"> 
        <form @submit="getClass">
          <input type="text" placeholder="Search..." v-model="class_id">
          <button type="submit">Search</button>
        </form>
        <br>
        <div v-if="classes"> <!-- conditionally render if array has results -->
         {{classes.data.response}} <!-- form shows when this is commented out -->
        </div>
  </div>
</template> 
 

Блок данных

  data() {
    return {
      classes: []
    };
  },
...
 

И методы блокируют

 methods: {

...
     // Request
      axios(config)
        .then(response => (this.classes = response))
   
        .catch(function (error) {
          console.log('There was an error :' , error);
        });
      }
}
 

Я относительно новичок в Vue, поэтому, если кто-нибудь может сказать мне, что здесь происходит не так, я был бы очень признателен. Заранее спасибо!

this.classes.data.response не определен

Вы можете попытаться быть более конкретным при назначении ответа на classes . Вместо this.classes = response этого сделайте это this.classes = response.data.response . response.data.response это массив, который вы ищете, а не response .

 methods: {

...
   // Request
      axios(config)
        .then(response => (this.classes = response.data.response))
   
        .catch(function (error) {
          console.log('There was an error :' , error);
        });
      }
}

 

Затем в шаблоне просто напишите {{ classes }} вместо {{ classes.data.response }} , также v-if="classes.length > 0" вместо просто v-if="classes" .

v-if="classes" всегда будет true

v-if="classes.length > 0" будет, true когда в массиве больше 0 элементов

Почему

Из-за асинхронного характера запроса API в момент, когда форма попытается выполнить рендеринг this.classes , все равно будет пустой массив, который вы определили. Только позже, после завершения запроса API, this.classes вы получите необходимые данные.

пустые массивы являются истинными, поэтому v-if="classes" они всегда будут истинными. используйте classes.length , так как результатом будет пустой массив 0 , который является ложным.

может быть, ты сможешь сделать что-то вроде

     <div v-if="classes.length>0">
     {{classes.data.response}} 
    </div>