javascript - Vue JS 使用对象分配但该对象中的数组仍然跟踪更改

Question

我有一组员工，在这个数组中我想通过单击“保存”按钮来编辑其中之一。所以我将数组的此项复制到另一个editedItem。一切正常，但该对象中的数组不是副本，它仍然引用父数组。让我用例子来解释一下。

我的员工数组示例:

[
       {
          "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
             }
          ]
       },
    ]

单击编辑项目时的代码:

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

因此，当我在editedItem.fullname中更改v-model时，仅在editedItem.fullname中进行更改，但是当我进行如下更改时:

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

editemItem 和员工数组中的培训日期发生变化。我无法理解 。我正在使用 Object.assign 复制此项，但更改是 react 性的。

谢谢

Answer 1

如果复制对象，引用将保留。为了避免这种情况，您可以在复制时尝试此操作

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

这将从 originalObject 中删除 copiedItem 的引用。

在这种情况下，您可以尝试类似的方法

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