VueJS Used Object assign but array in this object still trackes changes

Question

I have one array of employees and in this array I want to edit one of this by clicking save button. So I'm copying this item of array to another editedItem. Everything works good but array in this object is not copies it's still refers to parent array. Let me explain with examples.

Sample of my array of employees:

[
       {
          "id":1,
          "fullname":"Nabi Nabizade",
          "country_id":1,
          "emp_class":null,
          "ghrs_id":"168042",
          "position_id":1,
          "position":[
             {
                "id":1,
                "name":"Project HSE Coordinator"
             }
          ],
          "mandatoryFields":[
             {
                "name":"asddsa",
                "training_id":5,
                "training_date":"2020-03-27"
             },
             {
                "name":"dfgdgddfgd",
                "training_id":4,
                "training_date":null
             },
             {
                "name":"as",
                "training_id":1,
                "training_date":null
             },
             {
                "name":"dfsdf",
                "training_id":6,
                "training_date":null
             }
          ]
       },
       {
          "id":2,
          "fullname":"John Jack",
          "country_id":1,
          "emp_class":null,
          "ghrs_id":"158742",
          "position_id":2,
          "position":[
             {
                "id":2,
                "name":"HSE Officer"
             }
          ],
          "mandatoryFields":[
             {
                "name":"asddsa",
                "training_id":5,
                "training_date":null
             },
             {
                "name":"as",
                "training_id":1,
                "training_date":null
             }
          ]
       },
    ]

Code when I click to editItem:

  editItem (item) {
    console.log(item)
    this.editedIndex = this.employee.indexOf(item)
    this.editedItem = Object.assign({}, item)
    console.log(this.editedItem)
    this.dialog = true
  },

So after that when I change in v-model in editedItem.fullname changes only done in editedItem.fullname, but when I change in as below:

                <div
                  v-for="(input,k) in editedItem.mandatoryFields"
                  :key="k"
                  class="form-group"
                >
                  <v-menu
                    v-model="input.menu2"
                    :close-on-content-click="false"
                    :nudge-right="40"
                    transition="scale-transition"
                    offset-y
                    min-width="290px"
                  >
                    <template v-slot:activator="{ on }">
                      <v-text-field
                        v-model="input.training_date"
                        :label="input.name"
                        prepend-icon="mdi-calendar"
                        readonly
                        v-on="on"
                      />
                    </template>
                    <v-date-picker
                      v-model="input.training_date"
                      @input="input.menu2 = false"
                    />
                  </v-menu>
                </div>

Training date changes in editemItem and also in employee array. I can not understand . I'm copying with Object.assign this item but changes are reactive.

Thank you

Rijosh · Accepted Answer · 2020-03-28 11:14:24Z

2

If you copy an object, the reference will persist. To avoid this, you can try this while copying

let copiedItem = JSON.parse(JSON.stringify(originalObject));

This will remove the reference of copiedItem from the originalObject.

In this case you can try something like

editItem (item) {
    let copiedItem = JSON.parse(JSON.stringify(item));
    console.log(copiedItem)
    this.editedIndex = this.employee.indexOf(copiedItem)
    this.editedItem = Object.assign({}, copiedItem)
    console.log(this.editedItem)
    this.dialog = true
},

answered Mar 28, 2020 at 11:14

Rijosh

1,5641 gold badge9 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

VueJS Used Object assign but array in this object still trackes changes

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