element不支持v-model.lazy吗?

发布于 2022-09-11 15:45:14 字数 374 浏览 8 评论 0

用了.lazy修饰符,但还是每输入一个字符都会触发watch里面的事件,怎么在onchange后再触发修改值,触发watch呢?

<el-input 
    type="number" 
    v-on:change="changeGrabAmount"
    v-model.lazy="dialogParam.grabAmount" 
    :disabled="disableBtnGrabmount"
    >
</el-input>
watch:{
     "dialogParam.grabAmount": function(val) {
         //...
     }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

昇り龍 2022-09-18 15:45:14

试试.native.lazy
你为什么不在onchange里面做处理呢

一江春梦 2022-09-18 15:45:14

Element组件中文官网 input输入框组件第一行解释。不支持v-model 修饰符。

ex:
Input 为受控组件,它总会显示 Vue 绑定值

通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。

不支持 v-model 修饰符。

仅此而已 2022-09-18 15:45:14

.lazy修饰符并不能延迟完成数据更新,其实你v-model绑定的数据还是更新了,只不过没有在data里显示,但是watch还是可以监听到的,所以还是会触发watch,即使使用了.lazy修饰符
要想实现你想要的功能,你可以定义一个中间量过度一下,然后在v-on:change事件中处理一下。看代码吧

<el-input 
    v-on:change="changeGrabAmount"
    v-model="tmp" 
    :disabled="disableBtnGrabmount"
    >
</el-input>

data() {
    return {
        tmp: "",
        dialogParam: {
          grabAmount: ""
        }
    };
},
methods: {
    changeGrabAmount(val){
        this.dialogParam.grabAmount = val
    }
},
watch:{
    "dialogParam.grabAmount": function(val) {
        //...
     }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文