Vue v-model数据来自ajax未定义值

Question

我使用了vue 2。我有来自ajax的数据，这是我的代码示例：

<template>
    <div>
        <input type="input" class="form-control" v-model="siteInfo.siteId">
        <input type="input" class="form-control" v-model="siteInfo.info.name">
        <input type="input" class="form-control" v-model="siteInfo.accountData.name">
    </div>
</template>

<script>
export default {
    name: 'Site',
    data() {
        return {
            siteInfo: {},
            /* siteInfoName: '', */
        }
    },
    /*computed: {
        siteInfoName: function() {
            return siteInfo.info.name || '';
        },
        ...
    },*/
    methods: {
        getData() {
            // do ajax get data
            this.$http.post('URL', {POSTDATA}).then(response => {
                /*
                   response example
                   { body: 
                       data: {
                           sitdeId: 1,
                           info: { name: 'test'},
                           accountData: { name: 'accountTest'},
                       }
                   }
                */
                this.siteInfo = response.body.data;
            })
        }
    },
    mounted() {
        this.getData();
    }
}
</script>

我收到一条令人不安的消息

[Vue warn]：渲染错误：“TypeError：无法读取未定义的属性‘名称’”

1. 我可以用来computed修复它，但如果我有很多模型，我应该写很多计算的内容。
2. 我应该为这些模型创建大量数据吗？
3. 我不应该使用一个对象来绑定很多模型吗？

对于这种情况，它还有其他解决方案吗？谢谢你的帮助。

Answer 1

在数据加载之前siteInfo.info，undefined您将无法name访问v-model：

v-model="siteInfo.info.name"

同样对于siteInfo.accountData.name.

我的建议是设置siteInfoto的初始值null，然后v-if="siteInfo"在 main 上放置 a div。或者，您可以在检查和的v-if各个元素上放置。inputsiteInfo.infositeInfo.accountData

您可能还需要考虑在加载数据时显示替代内容，例如加载掩码。