咨询电话:
15628812133
30
2023/07

Vue中的表单内容监听,当表单内容发生变化时,触发一些事件

发布时间:2023-07-30 22:32:30
发布者:已经写了
浏览量:
0

首先解释一下什么是表单内容监听,我这里是将表单数据全部储存到list变量中,当用户填写了内容之后,将用户填写的内容更新到list变量中,说是监听表单内容实际上是监听变量中的数据内容。监听数据变化可以用watch方法,它是Vue组件中的一个功能,可以监听数据变化,并在数据变化时执行一些操作。

watch方法使用起来比较简单,只需要传两个参数就可以,第一个参数是需要监听的变量数据,第二个参数则是当监听的数据发生变化时候执行的回调函数,在回调函数中可以执行各种方法,下面就是调用的例子;

Vue中的表单内容监听,当表单内容发生变化时,触发一些事件

在说一说为什么会介绍这个方法,也算是避坑吧,最近开发更新手术护理系统app的时候,其中有一个表单页面需要增加新的功能,在选择时间之后自动获取用户之后需要填写的数据并更新到表单上,本身功能并不难,事件跟方法很快就 加上了,而且后台的内容自动填充的接口也开发完毕,但是在实际测试当中,选择时间之后,触发了内容自动填充的事件,但是数据却是怎么都写不到数据库当中,很是奇怪,第一反应是后台接口的问题,或者是数据库有问题,很奇怪流程,触发节点,提交请求都没有问题,就是写入不进数据库中。

最后找到原因就是表单内容设置了内容监听事件,在自动填充之后,由于页面存储的数据没有更新,而监听事件又设置了内容发生改变自动提交数据内容,直接把刚写入的内容覆盖成空所以导致了这个乌龙事件,如果大家以后也遇到类似情况可以从页面里面找一找是不是设置了数据监听。


关键词:
返回列表