在同一个 Vuejs 页面中添加和编辑答案

【问题标题】：Add & Edit in same Vuejs Page在同一个 Vuejs 页面中添加和编辑
【发布时间】：2020-03-15 02:56:57
【问题描述】：

现在我有一个带有 2 个按钮（创建、编辑）的列表页面像这样：

    <v-btn color="primary" dark class="mb-2" @click="editItem(new Object())">Create</v-btn>
      </v-toolbar>
    </template>
    <template v-slot:item.action="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>

在另一个页面中AddEdit.vue

我已经使用 V-model 绑定了数据像这样：

  <v-text-field v-model="SelectedUnit.bedrooms" label="No. Of Bedrooms"></v-text-field>

  <v-text-field v-model="SelectedUnit.bathrooms" label="No. Of Bathrooms"></v-text-field>

  <v-text-field v-model="SelectedUnit.area" label="Area"></v-text-field>

  <v-text-field v-model="SelectedUnit.builtArea" label="builtArea"></v-text-field>

  <v-text-field v-model="SelectedUnit.landArea" label="land Area"></v-text-field>


  <v-text-field v-model="SelectedUnit.address.addressLine1" label="adress Line 1"></v-text-field>

当我按下编辑时，我可以绑定数据，但 SelectedUnit.address.addressLine1 除外如果我使用 v-for 我可以绑定 SelectedUnit.address.addressLine1 的数据

问题是：当我使用 V-for 时，编辑按钮效果很好但是当我按下创建时，我在控制台中得到了很多错误并且我的屏幕上没有任何内容

【问题讨论】：

您能否提供您在控制台中遇到的错误？没有它，诊断问题会有点困难。
vue.runtime.esm.js?2b0e:619 [Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'addressLine1'”在 ---> 在 src/components/Compound/UnitsList.vue 在 src/App.vue
我想要做的是有一个表单，它允许我编辑按编辑时发送的数据，或者创建新对象并在其中添加数据
你能分享你的编辑和/或从组件中添加逻辑吗？

标签： vue.js axios vuetify.js

【解决方案1】：

我认为问题在于您将 new Object() 传递给您的 editItem 方法。我假设您在该方法中分配了该值 SelectedUnit，这会导致错误。

问题在于这会将嵌套对象address 设置为未定义。所以当你尝试从一个未定义的对象中读取addressLine1时，它会抛出一个错误。

我建议在编辑方法中将SelectedUnit 设置为自身的空白版本。像这样。

this.SelectedUnit = {
  address: {
    addressLine1: '',
    ...
  },
  bedrooms: '',
  ...
}

【讨论】：