Vue.js同一页面增改功能：嵌套属性绑定及v-for创建报错问题

Hey there, let's break down what's happening and fix this issue!

The Root Cause #

When you click the Create button, you're passing new Object() to editItem()—this creates an empty SelectedUnit with no address property. When your template tries to bind to SelectedUnit.address.addressLine1, it throws errors because address is undefined (you can't access a property of nothing!).

On the flip side, when you click Edit, the item you're passing already has the full structure including the address object, so the binding works perfectly. The v-for workaround might work for edit, but fails on create because there's no address to loop over.

Solutions to Fix This #

1. Initialize a Complete Object Structure (Recommended)

Instead of passing an empty object when creating a new item, initialize a full structure that matches your data model. This ensures all nested properties exist from the start:

// In your parent component's methods
editItem(item = {
  bedrooms: '',
  bathrooms: '',
  area: '',
  builtArea: '',
  landArea: '',
  address: {
    addressLine1: ''
  }
}) {
  this.SelectedUnit = {...item}; // Spread to avoid reference issues
}

Now when you click Create, SelectedUnit.address is already a valid empty object, so the v-model binding for addressLine1 will work without errors.

2. Use Optional Chaining in the Template

If you prefer not to pre-initialize the full structure, you can use the optional chain operator (?.) to safely access nested properties. This prevents errors when address is undefined:

<!-- In AddEdit.vue -->
<v-text-field v-model="SelectedUnit.address?.addressLine1" label="Address Line 1"></v-text-field>

• Note: For Vue 2, you'll need to add Babel support for optional chaining (install @babel/plugin-proposal-optional-chaining). Vue 3 supports this natively.

3. Guard v-for with a Check

If you're using v-for to render address fields, make sure to check that address exists before looping:

<template v-if="SelectedUnit.address">
  <div v-for="(value, key) in SelectedUnit.address" :key="key">
    <v-text-field v-model="SelectedUnit.address[key]" :label="key.replace(/([A-Z])/g, ' $1').trim()"></v-text-field>
  </div>
</template>

This way, the v-for only runs when address is available, avoiding errors on create.

Quick Recap #

The core issue was missing nested property initialization for new items. Initializing a complete object structure is the most reliable fix because it keeps your data model consistent across create and edit flows.

内容的提问来源于stack exchange，提问作者Hani Gerges