开发者问题收集

表单元素上的 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