取消表单后重置对象值

Question

我有这样的对象：

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

然后我只需单击打开一行 - handleUpdate(row)

handleUpdate(row) {
  this.temp = Object.assign({}, row);
  this.dialogFormVisible = true;
  this.dialogStatus = 'update';
  this.$nextTick(() => {
    this.$refs['dataForm'].clearValidate();
  });
},

然后会出现一个对话框

<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" 以及第一项的标签 label: "Filter ok? TEST"

然后我只需单击取消 btn 并再次打开同一行的对话框。

事情就是这样.. 而且我试图弄清楚为什么在我关闭弹出窗口而不保存后只是重置字段“名称”。保留我在详细数组中键入的内容。

插图： 初始化对象字段：

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

第一次打开并进行更改：

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

关闭不保存并再次打开：

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

截图：

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

DEMO

感谢您的帮助

Answer 1

这是因为Object.assign() 仅制作对象的浅表副本，而您正在修改嵌套属性detail.name。您需要制作更深入的副本，例如

this.temp = Object.assign({}, row, {
  detail: row.detail.map((item) => Object.assign({}, item)),
});

或使用扩展运算符

this.temp = {
  ...row,
  detail: [...row.detail.map(item => ({...item}))]
};

看到这个codesandbox

你也可以在 lodash 中使用像 cloneDeep 这样的助手