微信小程序vue3 setup 使用 uni-forms 组件ref获取表单验证validate of null
- 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,
}
}
}
```

按照vue3官方按照获取ref代码测试
```
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