Add & Edit in same Vuejs Page

Question

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

Could you provide the errors you're getting in the console? It's a little harder to diagnose the problem without it. — jrend
– jrend, Commented Nov 19, 2019 at 15:20
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'addressLine1' of undefined" found in ---> <UnitDetails> <UnitsList> at src/components/Compound/UnitsList.vue <VContent> <VApp> <App> at src/App.vue <Root> — Hani Gerges
– Hani Gerges, Commented Nov 19, 2019 at 15:27
what i want to do is have a form which allows me to edit data that i send when i press Edit, OR create new object and i add the data in it — Hani Gerges
– Hani Gerges, Commented Nov 19, 2019 at 15:28
Can you share your edit and/or add logic from the component? — Rule
– Rule, Commented Nov 20, 2019 at 9:40

jrend · Accepted Answer · 2019-11-19 15:50:17Z

1

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: '',
  ...
}

answered Nov 19, 2019 at 15:50

jrend

1,1223 gold badges15 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add & Edit in same Vuejs Page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related