表单元素上的 Vue.js 3 v-model 在 REST 调用中缺少数据时出现未定义类型错误
2021-09-15
626
来自 Svelte,刚接触 Vue.js 3,我遇到了一种让我感到有些困惑的情况。这是一个非常简单的场景,在处理无 SQL 后端的 REST 调用时,您将始终遇到这种情况……部分数据集。让我用这个简单的例子来解释一下:
<template>
<div v-if="info">
<form>
<input type="text" v-model="info.firstname">
<input type="text" v-model="info.lastname">
<input type="text" v-model="info.address.street">
<input type="text" v-model="info.address.city">
<input type="text" v-model="info.address.postalCode">
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
created() {
//Imagine a rest call here...
this.info = {
firstname: "Micheal",
lastname: "Jordan",
}
},
data() {
return {
info: {
firstname: '',
lastname: '',
address: {
city: '',
street: '',
postalCode: ''
},
}
}
}
}
</script>
由于缺少地址块,这将导致“未捕获(在承诺中)TypeError:$data.info.address 未定义”。但从功能上讲,地址是可选的,如果使用 MongoDB 或 DynamoDB 后端,则不会返回。我在开始时就说过,在 Svelte 中,我只需在我的信息对象上应用扩展运算符,“丢失”的数据就不重要了。如果我在“模拟”API 调用中添加缺少的地址部分,一切都很好。
我在这里遗漏了什么?!(记住我在这里开始学习 Vue ;-)
1个回答
好吧...我不知道为什么我没有更快地想到它...
....
this.info = {...this.info,
firstname: "Micheal",
lastname: "Jordan",
}
....
只需使用扩展运算符!:-)
Steve S.
2021-09-16