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

相关推荐
丑小鸭是白天鹅7 分钟前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin
萌萌哒草头将军10 分钟前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
sali-tec16 分钟前
C# 基于halcon的视觉工作流-章34-环状测量
开发语言·图像处理·算法·计算机视觉·c#
java搬砖工-苤-初心不变16 分钟前
基于 lua_shared_dict 的本地内存限流实现
开发语言·junit·lua
Qlittleboy35 分钟前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
charlie11451419139 分钟前
Kotlin 的 apply / with / run 详解
开发语言·kotlin·程序设计·面对对象
Tiger_shl44 分钟前
【层面一】C#语言基础和核心语法-02(反射/委托/事件)
开发语言·c#
小白菜学前端1 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL1 小时前
Knockout.js 任务调度模块详解
javascript·knockout