点击取消按钮,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...

相关推荐
万粉变现经纪人22 分钟前
如何解决 pip install -r requirements.txt 私有索引未设为 trusted-host 导致拒绝 问题
开发语言·python·scrapy·flask·beautifulsoup·pandas·pip
qq_4798754327 分钟前
C++ std::Set<std::pair>
开发语言·c++
毕业设计制作和分享29 分钟前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
云知谷3 小时前
【C++基本功】C++适合做什么,哪些领域适合哪些领域不适合?
c语言·开发语言·c++·人工智能·团队开发
键盘不能没有CV键3 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
l1t4 小时前
DeepSeek辅助利用搬移底层xml实现快速编辑xlsx文件的python程序
xml·开发语言·python·xlsx
你的人类朋友5 小时前
【Node】认识multer库
前端·javascript·后端
C_Liu_5 小时前
C++:list
开发语言·c++
my rainy days6 小时前
C++:友元
开发语言·c++·算法
小梁努力敲代码6 小时前
java数据结构--List的介绍
java·开发语言·数据结构