CODEWITHSUNDEEP
vue.jsaxiosvuetify.js
Hani Gerges
Hani Gerges

Reputation: 92

Add & Edit in same Vuejs Page

Now i have a List page with 2 Buttons (Create,Edit) Like this :

    <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>

And in another page AddEdit.vue

i have bind the data using V-model Like this :

  <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>

i can bind the Data when i press Edit except SelectedUnit.address.addressLine1 and if i used v-for i can bind the data for SelectedUnit.address.addressLine1

Problem is: when i use V-for the edit button works well but when i press create i get alot of erros in the console and nothing draw in my screen

Upvotes: 0

Views: 431

Answers (1)

jrend
jrend

Reputation: 1102

I believe the problem is that you are passing new Object() to your editItem method. I'm assuming that you assign that value SelectedUnit in that method, which is causing the error.

The problem is that this sets the nested object address to undefined. So when you try and read addressLine1 from an undefined object, it will throw an error.

I suggest setting SelectedUnit to a blank version of itself inside the edit method. Something like this.

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

Upvotes: 1

Related Questions