uni-ui icon indicating copy to clipboard operation
uni-ui copied to clipboard

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

Open hanxzi opened this issue 4 years ago • 6 comments

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

<template>
  <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
    <uni-forms-item label="姓名" required name="name">
	    <uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
    </uni-forms-item>
	    <button type="primary" size="mini" @click="onSubmit">提交</button>
    </uni-forms>
</ template>
<script>
  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,
			}
		}
	}
</script>

image

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

<template> 
  <div ref="root">This is a root element</div>
</template>

<script>
  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
      }
    }
  }
</script>

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

hanxzi avatar Dec 16 '21 10:12 hanxzi

升级最新的 HBuilderX Alpha,或最新的cli

fxy060608 avatar Dec 16 '21 11:12 fxy060608

升级最新的 HBuilderX Alpha,或最新的cli

已经是最新版了,uni-app 真是,感觉是没人维护的 10个组件起码有6个是有问题的

Anjinc188 avatar Sep 06 '22 04:09 Anjinc188

这是来自QQ邮箱的假期自动回复邮件。您好,我最近正在休假中,无法亲自回复您的邮件。我将在假期结束后,尽快给您回复。

hanxzi avatar Sep 06 '22 04:09 hanxzi

const valiForm = ref()

dw08 avatar Sep 20 '22 09:09 dw08

这是来自QQ邮箱的假期自动回复邮件。您好,我最近正在休假中,无法亲自回复您的邮件。我将在假期结束后,尽快给您回复。

hanxzi avatar Sep 20 '22 09:09 hanxzi

解决了嘛

pkc918 avatar Nov 02 '23 10:11 pkc918