Vue.js 取消表单后重置对象值

我有这样的目标：

"data": [
    {
        "id": 1,
        "name": "Checklist",
        "detail": [
            {
                "label": "Filter OK?",
                "type": "text"
            },
            {
                "label": "Package OK?",
                "type": "boolean"
            }
        ],
        "created_at": "2021-04-15T20:31:04.000000Z",
        "updated_at": "2021-04-16T13:44:36.000000Z"
    },..]

包含列出对象的表->this.list=dataList.data

<el-table v-loading="listLoading" :data="list" size="mini" stripe fit highlight-current-row style="width: 100%">
  <el-table-column align="left" label="" width="150">
    <template slot-scope="{row}">
      <el-button-group>
        <el-button type="primary" size="mini" icon="el-icon-folder-opened" @click="handleUpdate(row)" />
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteData(row)" />
      </el-button-group>
    </template>
  </el-table-column>
<el-table-column min-width="200px" align="left" :label="$t('position.name')">
    <template slot-scope="scope">
      <span>{{ scope.row.name }}</span>
    </template>
  </el-table-column>
</el-table>

然后出现一个对话框

<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
  <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="90px" style="width: 400px; margin-left:50px;">
    <el-form-item :label="$t('position.name')" prop="name">
      <el-input v-model="temp.name" />
    </el-form-item>
    <el-divider />
    <el-form-item v-for="(item, index) in temp.detail" :key="index" prop="detail">
      <el-input v-model="item.name" />
    </el-form-item>
    <el-divider />
    <el-input v-model="checklistItem" placeholder="Nová položka" class="input-with-select">
      <el-button slot="append" icon="el-icon-plus" @click="addChecklistItem()" />
    </el-input>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">
      {{ $t('table.cancel') }}
    </el-button>
    <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
      {{ $t('table.save') }}
    </el-button>
  </div>
</el-dialog>

第一次打开并进行更改：

"name": "Checklist TEST",
    "detail": [
        {
            "label": "Filter OK? TEST",
            "type": "text"
        },

关闭而不保存，然后再次打开：

"name": "Checklist",
    "detail": [
        {
            "label": "Filter OK? TEST",
            "type": "text"
        },

屏幕截图：

名称已重置，但标签未。。。我很困惑。我错过了什么

---

感谢您的帮助

这是因为

Object.assign（）

只创建对象的浅层副本，并且您正在修改嵌套属性

detail.name

。你需要做一个更深入的复制，比如

this.temp=Object.assign（{}，第行{
detail:row.detail.map（（item）=>Object.assign（{}，item）），
});

或者使用扩展运算符

this.temp={
一行
detail:[…row.detail.map（item=>（{…item}））]
};

看到这个了吗

---

您也可以使用lodash中的助手

您可以分享一些应用程序的流程截图吗？很难想象。当然，截图是完美的！啊哈，现在我终于明白了。。。非常感谢你！我去检查一下。

"name": "Checklist TEST",
    "detail": [
        {
            "label": "Filter OK? TEST",
            "type": "text"
        },

"name": "Checklist",
    "detail": [
        {
            "label": "Filter OK? TEST",
            "type": "text"
        },