Vue.js не может прочитать свойство null / undefined до его назначения

Question

У меня есть свойство, которое исходит от axios.get.

Оно определено в моем data как null (или '' или [])

axios вызов находится в created ловушке.

Когда приложение загружается впервые, консоль заполняется

 Error in render: "TypeError: Cannot read property 'service' of null"

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

Какой здесь лучший подход?

Answer 1

Вы можете инициализировать поле данных пустым, ненулевым значением или защитить доступ, используя v-if перед шаблоном, использующим свойство.

Answer 2

Вы должны указать свои данные как пустой объект, чтобы избежать этой ошибки:

    data: {
       your_object: {}
   }

Где your_object - это тот объект, который будет иметь служебное свойство при загрузке данных.

(По моему предположению, в функции обещания axios.get вы делаете что-то подобное:

your_object.service = result.data;

)

Answer 3

добавить v-if в элемент, где вы используете данные service.

Вот пример:

<label v-if="service">{{service}}</label>

или используйте родительский элемент, если это массив, подобный этому:

<label v-if="parent">{{parent.service}}</label>