点击取消按钮,console出来数据更改了,页面视图没有更新

点击取消按钮,console出来数据更改了,页面视图没有更新


前言

实现效果:点击取消按钮,页面视图全部为空,

遇到的问题: 点击取消按钮,console出来数据更改了,SchemaJson 都是默认值啦,页面视图没有更新

方法:使用 key 属性实现局部强制刷新


bash 复制代码
<template>
    <div class="app-container">
        <el-form :model="fromModel" label-width="100px" :rules="rules" ref="FormRef" >
            <el-form-item label="数据格式">
                <json-schema :schema.sync="fromModel.SchemaJson" :show-default-value="true"
                    :is-mock="false"></json-schema>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="upload.isUploading">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

import jsonSchema from '../json-schema-editor.vue'

export 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 表单区域进行局部刷新:

bash 复制代码
   <el-form :model="fromModel" label-width="100px" :rules="rules" ref="FormRef" :key="formKey"> </el-form>

然后在 data 函数里添加 formKey 这个响应式数据:

bash 复制代码
  data() {
        return {
            // 用于控制 key 值变化,实现局部刷新
            formKey: 0
        };
    },

最后,在 cancel 方法中改变 formKey 的值来强制表单区域重新渲染,实现局部刷新:

bash 复制代码
   cancel() {
            this.fromModel = {
                SchemaJson: {
                    "type": "object",
                    "properties": {},
                }
            };
            this.upload.isUploading = false;
            // 改变 key 值,触发局部重新渲染
            this.formKey++;
            this.$nextTick(() => {
                this.$refs.FormRef.resetFields();
            });
        },

Ending...

相关推荐
遂心_6 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark6 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_7 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy7 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy7 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼7 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子8 小时前
迭代器和生成器
前端·javascript
洋葱头_9 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing9 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
源猿人11 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化