Comments (10)
我觉得直接加 change 并不会降低 你说的代码量 ,change事件 要加的话,要提供 previousValue 和 currentValue,对比差异,这些成本 不小的。自己用watch 去监听值的修改,表单整体不是很庞大的话,逻辑划分更清楚,也更容易维护。如果过于庞大,可能要考虑是不是适合移动端了。
from vant.
技术支持出来一下,没人理吗
from vant.
我觉得你可以监听子组件的值,通过form实例来触发下一步操作,比如说 validate
from vant.
我觉得你可以监听子组件的值,通过form实例来触发下一步操作,比如说 validate
谢谢回复!我的理解是,子组件都去绑定@change或@update:modelValue到一个处理函数对吗,但这样要多写代码,有点麻烦。官方不能在form组件中解决一下吗
from vant.
再次感谢 @chouchouji ,想到过用watch,由于不了解watch背后的资源开销情况,故未用。
这两天尝试了修改源码,把form的children 放出来了,并试图用代码绑定change,但都没有成功。代码如下:
refForm.value.children.reduce<Record<string, unknown>>((form, field) => {
field.change = (e) => { listenFieldChange(field, e) }
//field.$emitter.on('change', listenFieldChange)
console.log('onMounted children =>', form, field, field.name)
}, {});
from vant.
再次感谢 @chouchouji ,想到过用watch,由于不了解watch背后的资源开销情况,故未用。 这两天尝试了修改源码,把form的children 放出来了,并试图用代码绑定change,但都没有成功。代码如下:
refForm.value.children.reduce<Record<string, unknown>>((form, field) => { field.change = (e) => { listenFieldChange(field, e) } //field.$emitter.on('change', listenFieldChange) console.log('onMounted children =>', form, field, field.name) }, {});
from vant.
再次感谢 @chouchouji ,想到过用watch,由于不了解watch背后的资源开销情况,故未用。 这两天尝试了修改源码,把form的children 放出来了,并试图用代码绑定change,但都没有成功。代码如下:
refForm.value.children.reduce<Record<string, unknown>>((form, field) => { field.change = (e) => { listenFieldChange(field, e) } //field.$emitter.on('change', listenFieldChange) console.log('onMounted children =>', form, field, field.name) }, {});
应该先获取所有的children,遍历监听 child 的 onUpdate:xxx 或者 值修改触发的事件 ,通过 useExpose 导出
from vant.
@chouchouji 哈哈哈太感谢了!!!按您的意见,用 watch 已经可以实现了,代码如下:
const formFields = []
// 以下测试 vant form children
refForm.value.children.reduce<Record<string, unknown>>((form, field) => {
//field.blur = (e) => { listenFieldEvent(field, e) }
//field.$emitter.on('blur', listenFieldEvent)
formFields.push(field.formValue)
console.log('onMounted children =>', form, field)
}, {});
watch(formFields, () => {
console.log('form change =>', refForm.value.getValues())
})
我再用您后边的办法试一试
from vant.
@chouchouji 哈哈哈太感谢了!!!按您的意见,用 watch 已经可以实现了,代码如下:
const formFields = [] // 以下测试 vant form children refForm.value.children.reduce<Record<string, unknown>>((form, field) => { //field.blur = (e) => { listenFieldEvent(field, e) } //field.$emitter.on('blur', listenFieldEvent) formFields.push(field.formValue) console.log('onMounted children =>', form, field) }, {}); watch(formFields, () => { console.log('form change =>', refForm.value.getValues()) })
我再用您后边的办法试一试
@chouchouji 哈哈哈太感谢了!!!按您的意见,用 watch 已经可以实现了,代码如下:
const formFields = [] // 以下测试 vant form children refForm.value.children.reduce<Record<string, unknown>>((form, field) => { //field.blur = (e) => { listenFieldEvent(field, e) } //field.$emitter.on('blur', listenFieldEvent) formFields.push(field.formValue) console.log('onMounted children =>', form, field) }, {}); watch(formFields, () => { console.log('form change =>', refForm.value.getValues()) })
我再用您后边的办法试一试
我写的只是一个思路,没有具体验证过(不用太放心上
from vant.
结合阁下的思路,再结合vue3中watchEffect允许我们自动跟踪回调的响应式依赖的原理,
const formFields = ref([]); watchEffect(async () => { if (formRef.value) { formFields.value = formRef.value?.getValues(); console.log('formFields', formFields.value); } });
这个当表单change的时候也会被触发
from vant.
Related Issues (20)
- 关于 uniapp HOT 1
- [Bug Report] cascader 默认赋值问题
- 国内站点地址挂了 HOT 9
- [Bug Report]SwipeCell 滑动单元格点击事件错误捕获 HOT 3
- [Bug Report] 关于步进器stepper建议修复下autocomplete问题,应该是默认off或者做成可以配置的 HOT 1
- [Bug Report] useCountDown倒计时总时长被本地时间影响 HOT 1
- [Bug Report] IOS17.4.1版本使用upload组件进行拍照上传的时候会造成页面白屏崩溃 HOT 2
- vant/cli css 打包bug Selector "[data-v-5c89f644]" can't have a suffix
- Gitee 文档站下线通知 & 解决方法 HOT 3
- [Bug Report] IOS 17.4.1 van-uploader 无法选择本地图片
- css样式误差, 感觉像是样式丢失了一样。 HOT 3
- [Bug Report] Area组件中columns-placeholder属性在选择省份和城市数据后出现展示问题 HOT 2
- van-field在自适应高度时,同时添加max-height属性,在超出限高再输入中文时,内容总是滚动到顶部。 HOT 2
- vant-swiper使用动态分页数据,在部分安卓机型,最后一页滑动,会出现白屏
- [Bug Report] vant组件使用插槽以后内部的组件属性watch会有异常问题
- [Bug Report] Tab内嵌套滚动Tab,滚动Tab点击下标响应不正确
- [Bug Report] DropdownMenu 下拉菜单给options属性赋值时采用调用方法的形式时,控制台报警告Uncaught (in promise) Maximum recursive updates exceeded in component <van-dropdown-menu>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
- [Feature Request] DropdownMenu 请求添加一个属性来控制当子菜单只有一个选项时可直接点击并触发菜单切换
- [Feature Request] DatePicker 日期选择添加农历 HOT 1
- [Bug Report] 页面中使用galacean effects生成的cavans后 vant的下拉刷新有时候就不会走refresh方法 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vant.