在 vue.js 中异步加载对象时，如何将 v-model 设置为对象 属性？

Question

我正在使用 vue.js 应用程序，我想将复选框输入上的 v-model 设置为异步加载的对象的 属性。这是代码：

        <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-model 最初被设置为未定义的 属性（因为通知对象最初为 null）。在创建的挂钩运行并且通知对象从对 API 的调用返回后，通知对象存在并且具有 属性 'email'.

因为通知对象一开始是空的，浏览器抛出一个错误"Cannot read property 'email' of null"并停止执行。

有没有办法将 v-model 设置为异步加载的东西（或在页面生命周期的后期）？

谢谢。

Answer 1

您可以使用计算 属性（@Anatoly，更新。我添加了 getter 和 setter）：

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。但它现在在头顶寻找我。