首页 > 其他分享 >resetFields失效与$nextTick

resetFields失效与$nextTick

时间:2023-05-30 17:58:19浏览次数:42  
标签:nextTick productPrice form resetFields res 失效 data id

 这个问题会比较常见。

我们经常会遇见这么写:update和add共用一个弹窗。update时,表单回显;add时,需要清空表单。

 

 

我们可能会用到Element-Ui表单的resetFields()方法,但是如果操作不当,这个resetFields()方法并不会生效。

官网对这个方法的定义:

resetFields: 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果

重置为初始值,这个初始值指的是mount()方法前的初始值,所以我们在对form表单进行赋值时,需要在mount()方法之后。

 

先看一个对失效且对nextTick乱使用的例子:

// update回显方法
updateInit(id) {
  get(id).then(res => {
    this.$nextTick(() => {
      this.form.id = id;
      this.form.appId = res.data.appId;
      this.form.productId = res.data.productId;
      this.form.productName = res.data.productName;
      this.form.productPrice = res.data.productPrice;
      this.form.productPrice = res.data.productPrice;
      this.form.currencyCode = res.data.currencyCode;
      this.form.enableStatus = res.data.enableStatus;
      // 弹框显示
      this.dialogFormVisible = true;
    });
  });
}

这个例子最失败的问题在于,在nextTick中调用了触发界面渲染的方法,当首次点击的是更新按钮而不是新增按钮,导致mount()方法之前对form进行了赋值。所以后面点击新增按钮调用resetFields时,仍然显示之前update回显的form数据。

 

正确写法:

// update回显方法
updateInit(id) {
    get(id).then(res => {
         // 弹框显示
        this.dialogFormVisible = true;
        this.$nextTick(() => {
            this.form.id = id;
            this.form.appId = res.data.appId;
            this.form.productId = res.data.productId;
            this.form.productName = res.data.productName;
            this.form.productPrice = res.data.productPrice;
            this.form.productPrice = res.data.productPrice;
            this.form.currencyCode = res.data.currencyCode;
            this.form.enableStatus = res.data.enableStatus;
        });
    });
}

这里也揭示了$nextTick的绝大多数使用模板:

// 这里进行首次渲染的操作
this.$nextTick(() => {
  // 这里面进行数据操作            
});

 

标签:nextTick,productPrice,form,resetFields,res,失效,data,id
From: https://www.cnblogs.com/jqws/p/17443915.html

相关文章

  • Spring事务失效的场景
    (1)方法没有用public修饰会导致事务失效。解决方法:在方法上使用public修饰。(2)使用try-catch捕获异常没有抛出异常,而是由方法自己处理会导致事务失效。解决方法:处理了异常记得抛出。(3)方法抛出检查异常会导致事务失效,报错也会导致事务失效。解决方法:在@transactional注解上配置ro......
  • matlab中find函数失效的问题
    (52条消息)关于matlab中find函数失效的问题_matlabfind有时候找不到值_开飞机的小毛驴儿的博客-CSDN博客matlab中的find函数可以返回指定元素的位置,但是有时候会发现矩阵中明明存在一个数,但是返回位置却是空的,即找不到指定元素的位置。这时候需要考虑的是matlab的精度问题。如......
  • 使用SpringMVC 拦截器导致出现@CrossOrigin失效问题解决办法
    非简单请求会发起一个OPTIONS方法的预检请求,这个请求会被拦截器拦截,但是服务器没有给浏览器返回必要的跨域指示信息(比如:“Access-Control-Allow-Origin”----允许哪些请求访问),浏览器没收到指示信息,就认为服务器不允许跨域请求,就会报错。所以需要在拦截器拦截OPTIONS方法的预......
  • 正点原子imx6ull中sudo命令失效问题
    问题出现事情的起因是这样的,我的imx6ull的板子很久没用了,这次重新上电之后,我习惯性的敲了一个sudo随后就发现报错sudo:errorin/etc/sudo.conf,line0whileloadingplugin`sudoers_policy'sudo:/usr/libexec/sudo/sudoers.somustbeownedbyuid0sudo:fatalerror,un......
  • FLEX4 序列号失效
    愚人节这天,FLASHBUILDER也和大家开了个玩笑,一大早起来,序列号被封了。上网搜了一下,果然天无绝人之路 但是我换了序列号仍然无法使用 再看以下这位高手的:方法1:暂时把系统时间改到2008,启动后再调回现在的时间。方法2:解压后存入Flex的安装文件夹plugins/com.adobe.flexide.amt_4.0.......
  • linux命令全部失效+无法登录 极限操作
    背景在kali上大概用了有两个月,这两个月可以说喜忧参半喜:kali系统优化的很好,不管是开机关机还是运行应用程序,都非常快,非常流畅,配合占用超小的xcfe桌面,爽飞忧:由于我是直接安装在物理机上的,原本是打算做开发和逆向用,但这个系统做开发和逆向,bug实在是太多,而且缺少很多必要的so文件(......
  • 【IntelliJ IDEA】idea 的全局搜索快捷键ctrl+shift+f 失效的解决方案
    解决方案一:1、新装的idea的快捷键ctrl+shift+f按了没反应,于是很快就想到快捷键冲突了,马上查看五笔和搜狗输入法的快捷键,如下图: 以上两个都是简体和繁体切换的快捷键。把这两个快捷键换了就可以搞定。 解决方案二:2、第二种方案就是在Idea中设置快捷键,如下图:然后按照以下步骤设置:第......
  • pycharm中创建python包失效
    testDemo是我创建的python包,但图标一直显示为文件夹,导致后期使用无法导入。   解决: 在设置中找到项目结构 选择对应文件夹并标记为源即可......
  • Vue中this.$nextTick()的理解与使用方法
    https://www.jb51.net/article/238332.htmhttps://blog.csdn.net/lzfengquan/article/details/118933093......
  • vue2子组件切换,监听方法失效(监听多个字段)
    记录下问题本来是在父页面上放了多个子组件,利用单选按钮控制每个组件,选择了某个按钮,设置该组件控制字段为true,例如v-if="component"来控制销毁创建,根据component=true或者flase来控制子组件创建或者销毁后来发现子组件切换时,监听不生效,监听方法也加了immediate=true,当几个按钮......