Vue修改时，撤销修改内容

原文地址：https://forum.vuejs.org/t/topic/37424 

 时隔N久，重新整理下这个帖子。。

背景：我的基础功能是，一个table，前面是checkbox，选择某一行，点击修改按钮，弹出对话框，展示要修改的内容，如果点击"取消"则不保存内容，点击"提交"按钮，则将修改的内容通过ajax请求，提交到后台。。

------------------------------------------------------------------分割线-----------------------------------------------------------------------------------

在尝试了N久之后，终于将思绪理清楚，

1、将选择的某一行，转换成JSON字符串某一个变量，假如这个变量名字叫a

2、然后将a转回成对象，赋值给你对话框里展示内容的对象b

3、假如用户要修改，修改的是b，点击取消的话还是a对象，点击提交，提交的事b对象。

如果同志们还不清楚，下面上代码:

```

@selection-change="handleSelectionChange" 用于选择某一行（我这里实现的事单选功能）

handleSelectionChange(val) {

this.selectRows = val;

},// 讲选择的行赋值给这个变量

```

下面是我对话框里面展示的内容，主要是讲editForm的各个属性展示出来

```

<el-dialog title="修改算法" :visible.sync="editAnalyticsVisible" :close-on-click-modal="true" :before-close="handleClose">

<el-form ref="editForm" :model="editForm" label-width="80px" class="dialogForm" :rules="rules">

<el-form-item label="算法名称">

<el-input v-model="editForm.name"></el-input>

</el-form-item>

<el-form-item label="算法编码" prop="code">

<el-input v-model="editForm.code"></el-input>

</el-form-item>

<el-form-item label="算法作者">

<el-input v-model="editForm.author"></el-input>

</el-form-item>

<el-form-item label="算法类型">

<el-select v-model="editForm.type" placeholder="请选择">

<el-option v-for="(item,index) in type" :label="item.label" :value="item.value" :key="index">

</el-option>

</el-select>

</el-form-item>

<el-form-item label="算法版本">

<el-input v-model="editForm.version"></el-input>

</el-form-item>

<el-form-item label="算法语言">

<el-select v-model="editForm.supportedLanguage" placeholder="请选择">

<el-option v-for="(item,index) in places" :label="item.label" :value="item.value" :key="index">

</el-option>

</el-select>

</el-form-item>

<el-form-item label="算法分类">

<el-input v-model="editForm.taxonomyLocationName" readonly=""></el-input>

<el-button type="primary" @click.prevent="queryTaxonomyLocation();dialogType = 'edit'">选择分类</el-button>

</el-form-item>

<el-form-item label="算法描述">

<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="editForm.description">

</el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="handleEditPut('editForm')" :loading="editLoading">确定</el-button>

<el-button @click="cancelEdit">取消</el-button>

</el-form-item>

</el-form>

<div>

</div>

</el-dialog>

```

我们来看下给editform赋值的代码，

选择table里面的某一行，然后点击编辑按钮，开始赋值，并从dialog里面展示出来，

下面这段代码为，点击编辑时，进行的赋值操作

```

handleEdit(index, row) {

if (this.selectRowsCheck()) {

this.editAnalyticsVisible = true;

// this.editForm = this.selectRows[0];

this.editRow = JSON.stringify(this.selectRows[0]);

this.editForm = JSON.parse(this.editRow);

}

},

```

点击取消按钮时触发的操作，恢复成原来的初始值

```

cancelEdit() {

this.editAnalyticsVisible = false;

this.editForm = JSON.parse(this.editRow);

},

```

点击提交按钮进行的操作，将修改之后的值提交给后台

```

handleEditPut(formName) {

this.$refs[formName].validate((valid) => {

if (valid) {

this.editLoading = true;

if (this.dialogType === "edit") {

this.editForm.taxonomyLocationId = this.selectTaxonomyLocationId;

}

Put(Api.analytics, this.editForm)

.then(res => {

if (res.success && res.code === ERR_OK) {

this.editLoading = false;

this.editAnalyticsVisible = false;

this.$message({

message: "操作成功！",

type: "success"

});

this.queryData(this.searchParams);

} else {

this.editLoading = false;

this.$message({

message: res.msg,

type: "warning"

});

}

})

.catch(err => {

this.editLoading = false;

console.log(err);

this.$message({

message: "操作失败，请联系管理员",

type: "warning"

});

});

} else {

console.log('error submit!!');

return false;

}

});

```

 

原理就是同第一种方法一样，将对象转换成字符串以后，就不会进行双向绑定，

小伙伴们听懂了吗？