当前位置：首页 > article >正文

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

article 2025/1/5 17:23:10

前言

实现效果：点击取消按钮，页面视图全部为空，
遇到的问题：点击取消按钮，console出来数据更改了，SchemaJson 都是默认值啦，页面视图没有更新
在这里插入图片描述
方法：使用 key 属性实现局部强制刷新

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

   <el-form :model="fromModel" label-width="100px" :rules="rules" ref="FormRef" :key="formKey"> </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();
            });
        },