form 表单 点击取消按钮后,数据发生变化
form 点击取消,数据发生变化
·
我用的watch 来监听form表单每次的变化,点击取消之后,数据任然变化了,简单说就是深拷贝和浅拷贝的问题。
解决办法:
父组件:
<script>
methods:{
//编辑方法
UpdateFormDatas(data) {
this.dialogVisible = false;
let newTable = [];
this.tableData.map((item) => {
if (item.ID == data.ID) {
newTable.push(data);
} else {
newTable.push(item);
}
});
this.tableData = newTable;
console.log("编辑成功之后===", this.tableData);
},
}
</script>
子组件(form表单)
<script>
/接收父组件传递过来的值
props: {
form: {
type: Object,
default: {},
},
},
//监听
watch: {
//#region 监听变量
//这是监听变量的写法
// form(newVal, oldVal) {
// debugger;
// if (newVal && newVal.length == 0) {
// this.newFrom = {
// ID: "",
// aircraftNum: "",
// aircraftModel: "",
// isenable: "",
// isOK: "",};
// } else {
// this.newFrom = newVal;
// }
// },
//#endregion
//这是监听对象的写法
form: {
handler(newValue, oldValue) {
if (JSON.stringify(newValue) == "{}") {
this.newFrom = {
ID: "",
aircraftNum: "",
aircraftModel: "",
isenable: "",
isOK: "",
};
} else {
//传过来的是对象的话,是这种形式
this.newFrom = JSON.parse(JSON.stringify(newValue));
}
console.log("oldValue:", oldValue);
console.log("newValue:", newValue);
},
deep: true, // 深度监听:值变了也能监听到,如果不写这句,就只能监听到this.newFrom有没有变,而不能监听到其里面的值有没有变
immediate: true, //初始化时也调用
},
},
</script>
监听对象和变量的写法不同,在此文章中可以查看:https://blog.csdn.net/CMDN123456/article/details/129805084

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)