dcloudio / dcloudio/uni-ui

微信小程序vue3 setup 使用 uni-forms 组件ref获取表单验证validate of null

Open
#423 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.1k
Forks
661
PR merge metrics
No merged PRs in 30d

Description

uni-app中使用vue3 setup写法编译到微信小程序表单验证ref获取不到
```





提交

import { ref, reactive } from 'vue'
export default {
setup(props,context) {
const valiForm = ref(null)
const valiFormData = reactive({
name: '',
})
const rules = reactive({
name: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
},
})

const onSubmit = () => {
valiForm.value.validate().then(res => {
console.log("values", valiFormData);
}).catch(err => {
console.log('err', err);
})
}

return {
onSubmit,
rules,
valiForm,
valiFormData,
}
}
}

```
![image](https://user-images.githubusercontent.com/15724884/146353886-03bf03bf-eb63-47dd-bbfe-ff4a266a6fc4.png)

按照vue3官方按照获取ref代码测试
```

This is a root element

import { ref, onMounted } from 'vue'

export default {
setup() {
const root = ref(null)

onMounted(() => {
// DOM 元素将在初始渲染后分配给 ref
console.log(root.value) // <div>This is a root element</div>
})

return {
root
}
}
}

```
编译在微信小程序里面console.log()输出的内容依旧是null, 在h5测试结果正常

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the provided uni-app Vue 3 setup example in the WeChat mini-program build and compare its ref value and form validation behavior with H5, including the onMounted case. Start by tracing the uni-forms component ref lifecycle and the validate call; done means the ref is available and validation no longer fails with “validate of null” on WeChat.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.