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

我用的是VUE2。我有一个来自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>

导出默认值{
名称：'站点'，
数据（）{
返回{
站点信息：{}，
/*siteInfoName:“”*/
}
},
/*计算：{
siteInfoName:函数（）{
返回siteInfo.info.name | |“”；
},
...
},*/
方法：{
getData（）{
//ajax可以获取数据吗
这是.http.post（'URL'，{POSTDATA}）。然后（response=>{
/*
响应示例
{机构：
数据：{
西戴德：1，
信息：{name:'test'}，
accountData:{name:'accountTest'}，
}
}
*/
this.siteInfo=response.body.data；
})
}
},
安装的（）{
这是getData（）；
}
}

我收到了一条敌对的信息

[Vue warn]：呈现时出错：“TypeError:无法读取属性“name” “未定义的”

我可以使用

computed

来修复它，但如果我有很多模型，我应该 写很多

我应该为那些模型创建很多数据

我不应该使用对象绑定地块模型

---

对于这种情况，它是否有其他解决方案？谢谢您的帮助。

在加载数据之前，

siteInfo.info

将是

未定义的

，因此您无法访问

v-model

中的

name

：

v-model="siteInfo.info.name"

同样，对于

siteInfo.accountData.name

我的建议是将

siteInfo

的初始值设置为

null

，然后在主

div

上放置一个

v-if=“siteInfo”

。或者，您可以在检查

siteInfo.info

和

siteInfo.accountData

的单个

input

元素上放置

v-if

---

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

在数据加载<代码>站点信息.Ing/<代码>将是<代码>未定义，因此您不能在<代码> V模型< /代码>：

中访问<代码>名称<代码> >

v-model="siteInfo.info.name"

同样，对于

siteInfo.accountData.name

我的建议是将

siteInfo

的初始值设置为

null

，然后在主

div

上放置一个

v-if=“siteInfo”

。或者，您可以在检查

siteInfo.info

和

siteInfo.accountData

的单个

input

元素上放置

v-if

---

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

< P>不要担心太多的V模型——您可以在<强>对象< /强>上进行迭代，例如使用<代码>对象。

Vue.component（'list-input-element'{
道具：['siteLabel'，'siteInfo']，
模板：“{siteLabel}}”
})
新Vue({
名称：'站点'，
el:“#应用程序”，
数据（）{
返回{
站点信息：{}，
}
},
方法：{
getData（）{
//在本例中使用实体模型数据
取（'https://jsonplaceholder.typicode.com/todos/1')
.then（response=>response.json（））
。然后（json=>{
console.log（json）
this.siteInfo=json
})
//ajax可以获取数据吗
/*这是。$http.post（'URL'{
POSTDATA
})。然后（响应=>{
this.siteInfo=response.body.data；
})*/
}
},
安装的（）{
这是getData（）；
}
})

div{
显示：块；
}

---

不要担心太多的v型模型-您可以在对象上进行迭代，就像使用

对象.entries（）

Vue.component（'list-input-element'{
道具：['siteLabel'，'siteInfo']，
模板：“{siteLabel}}”
})
新Vue({
名称：'站点'，
el:“#应用程序”，
数据（）{
返回{
站点信息：{}，
}
},
方法：{
getData（）{
//在本例中使用实体模型数据
取（'https://jsonplaceholder.typicode.com/todos/1')
.then（response=>response.json（））
。然后（json=>{
console.log（json）
this.siteInfo=json
})
//ajax可以获取数据吗
/*这是。$http.post（'URL'{
POSTDATA
})。然后（响应=>{
this.siteInfo=response.body.data；
})*/
}
},
安装的（）{
这是getData（）；
}
})

div{
显示：块；
}

URL应该是这样的吗？还是只是为了逃避？以防万一。我添加了响应数据sameplI只是想知道对于这种情况，什么是好的解决方案。URL应该是这样的吗？还是只是为了逃避？以防万一。我添加了响应数据sameplI只是想知道什么是这个案例的好解决方案。