Как установить v-модель для свойства объекта, когда объект загружается асинхронно в vue. js?

Question

Я работаю с приложением vue. js и хочу установить v-модель на входе флажка для свойства объекта, который загружается асинхронно. Вот код:

        <v-layout>
          <v-checkbox required v-model="notifications.email">
          </v-checkbox>
          <p>I would like to receive notifications by email.</p>   
        </v-layout>

        ...

        export default {
        ...
        data: () => ({
            ...
            notifications: null
            ...
        })
        ...
        async created() {
            this.notifications = await api.get('/notifications');
        }
        ...
        }

Другими словами, сначала v-модели присваивается неопределенное свойство (поскольку сначала объект уведомлений имеет значение null). После запуска созданного хука и возвращения объекта уведомлений из вызова API, объект уведомлений существует и имеет свойство 'email'.

Поскольку объект уведомлений сначала пуст, браузер выдает сообщение об ошибке «Не удается прочитать свойство« email »со значением NULL» и останавливает выполнение ».

Есть ли способ установить v-модель для чего-либо, что загружается асинхронно (или позже в жизненном цикле страницы)?

Спасибо.

Answer 1

Вы можете использовать вычисляемое свойство (@Anatoly, Upd. Я добавил геттеры и сеттеры):

computed: {
    notifications_email: {
        get: function(){
            if(typeof this.notifications !== 'undefined'){
                return this.notifications.email;
            }    else{
                return false;
            }
        },
        set: function(val){
            this.notifications.email = val;
        }
    }

}

и заменить свой флажок на:

<v-checkbox required v-model="notifications_email">

PS. Но теперь он смотрит на меня сверху.