网站建设 电商,建设网络强国论文,人力资源公司排名,重庆网站优化网络服务点击取消按钮#xff0c;console出来数据更改了#xff0c;页面视图没有更新 前言
实现效果#xff1a;点击取消按钮#xff0c;页面视图全部为空#xff0c; 遇到的问题#xff1a; 点击取消按钮#xff0c;console出来数据更改了#xff0c;SchemaJson 都是默认值啦…点击取消按钮console出来数据更改了页面视图没有更新 前言
实现效果点击取消按钮页面视图全部为空 遇到的问题 点击取消按钮console出来数据更改了SchemaJson 都是默认值啦页面视图没有更新 方法使用 key 属性实现局部强制刷新 templatediv classapp-containerel-form :modelfromModel label-width100px :rulesrules refFormRef el-form-item label数据格式json-schema :schema.syncfromModel.SchemaJson :show-default-valuetrue:is-mockfalse/json-schema/el-form-itemel-form-itemel-button typeprimary :loadingupload.isUploading确 定/el-buttonel-button clickcancel取 消/el-button/el-form-item/el-form/div
/templatescriptimport jsonSchema from ../json-schema-editor.vueexport default {name: algorithmCom,components: { uploadCom, jsonSchema },data() {return {upload: {isUploading: false,},fromModel: {SchemaJson: {type: object,properties: {},},},rules: {},};},methods: {cancel() {this.fromModel {SchemaJson: {type: object,properties: {},}};this.upload.isUploading false;this.$nextTick(() {this.$refs.FormRef.resetFields();});console.log(this.fromModel)},},computed: {},
};
/script
通过排查发现
使用 key 属性实现局部强制刷新 原理 在 Vue 中给组件或者 DOM 元素添加 key 属性当 key 值改变时Vue 会认为这是一个全新的元素从而重新创建和渲染它以及它内部的子元素达到强制局部刷新的效果。 应用示例 首先在你希望实现局部刷新的表单元素外层添加 key 属性并在 data 中定义对应的响应式数据来控制这个 key 值比如针对整个 el-form 表单区域进行局部刷新 el-form :modelfromModel label-width100px :rulesrules refFormRef :keyformKey /el-form然后在 data 函数里添加 formKey 这个响应式数据 data() {return {// 用于控制 key 值变化实现局部刷新formKey: 0};},最后在 cancel 方法中改变 formKey 的值来强制表单区域重新渲染实现局部刷新 cancel() {this.fromModel {SchemaJson: {type: object,properties: {},}};this.upload.isUploading false;// 改变 key 值触发局部重新渲染this.formKey;this.$nextTick(() {this.$refs.FormRef.resetFields();});},Ending…
