form表单不能进行v-model绑定，进而导致input框验证失败

[cxbb666]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.0.0-rc.1

Environment

win10 谷歌85版本 vue3.0.2 vite1.0.0-rc.8

Reproduction link

Steps to reproduce

form表单不能进行v-model绑定，进而导致input框验证失败

What is expected?

form进行v-model绑定

What is actually happening?

form表单不能进行v-model绑定

[ajuner]

<Input value={modelRef.loginEmail} onInput={e=> modelRef.loginEmail = e.target.value}/>
或者
<Input v-model={[modelRef.loginEmail, 'value']}/>

[cxbb666]

我已经这样写了，为什么还是不行， 我用的是tsx

[cxbb666]

<输入值= {modelRef.loginEmail} onInput = {e => modelRef.loginEmail = e.target.value} />
或者
<输入v-model = {[modelRef.loginEmail，'value']} /> />

图片
图片
我已经这样写了，为什么还是不行，我用的是tsx

[ajuner]

<输入值= {modelRef.loginEmail} onInput = {e => modelRef.loginEmail = e.target.value} />
或者
<输入v-model = {[modelRef.loginEmail，'value']} /> />

图片
图片
我已经这样写了，为什么还是不行，我用的是tsx

tsx用useForm的形式试试
https://2x.antdv.com/components/form-cn/#components-form-demo-useform

[cxbb666]

<输入值= {modelRef.loginEmail} onInput = {e => modelRef.loginEmail = e.target.value} />
或者
<输入v-model = {[modelRef.loginEmail，'value']} /> /> />

图片
图片
我已经这样写了，为什么还是不行，我用的是tsx

tsx用useForm的形式尝试
https://2x.antdv.com/components/form-cn/#components-form-demo-useform

这个userForm我之前试过 好像有个地方有点问题 现在没用了

[ajuner]

提供一个复现吧~

[cxbb666]

提供一个复现吧~

不能上传视频

[ajuner]

用codeSandBox写一个保存路径

[cxbb666]

提供一个复现吧~

import { defineComponent, reactive, toRefs, toRaw, ref, onMounted } from 'vue'
import { Form, Input, Button } from 'ant-design-vue'

export default defineComponent({
name: 'register',
setup() {
const ruleForm = ref(null)

const data = reactive({
  labelCol: { span: 4 },
  wrapperCol: { span: 14 }
})

onMounted(() => {
  console.log(ruleForm.value)
})

const onSubmit = (e: Event) => {
}

const modelRef = reactive({
  loginEmail: '',
  password: '',
  confirmPassword: '',
  photoUrl: '',
  code: ''
})

const validatePass = async (rule: any, value: string | number) => {
  if (value === '') {
    return Promise.reject('请输入密码')
  } else {
    if (modelRef.confirmPassword !== '') {
      ruleForm.value.validateField('confirmPassword')
    }
    return Promise.resolve()
  }
}

const validatePass2 = async (rule: any, value: string | number) => {
  if (value === '') {
    return Promise.reject('请输入确认密码')
  } else if (value !== modelRef.password) {
    return Promise.reject('两次密码不一致')
  } else {
    return Promise.resolve()
  }
}

const rulesRef = reactive({
  loginEmail: [
    { required: true, message: '请输入登录邮箱', trigger: 'blur' },
    { message: '请输入正确的邮箱', type: 'email', trigger: 'blur' }
  ],
  password: [
    { validator: validatePass, trigger: 'change' }
  ],
  confirmPassword: [
    { validator: validatePass2, trigger: 'change' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
})

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
}

return () => {

  return (
    <Form
      ref={ruleForm}
      name="control-ref"
      labelCol={data.labelCol}
      wrapperCol={data.wrapperCol}
      model={modelRef}
      rules={rulesRef}
    >
      <Form.Item
        name="loginEmail"
        label="邮箱"
        hasFeedback
      >
        <Input v-model={[modelRef.loginEmail, 'value']} onChange={value=>console.log(value.target.value,modelRef.loginEmail+'-')} type="email" placeholder='请输入邮箱'/>
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        hasFeedback
      >
        <Input.Password value={modelRef.password} onChange={value => modelRef.password = value.target.value} type="password" placeholder='请输入密码'/>
      </Form.Item>
      <Form.Item
        name='confirmPassword'
        label="确认密码"
        hasFeedback
      >
        <Input.Password value={modelRef.confirmPassword} onChange={value => modelRef.confirmPassword = value.target.value} type="password" placeholder='请输入确认密码'/>
      </Form.Item>
      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          注册
        </Button>
      </Form.Item>
    </Form>
  )
}

}
})
代码都发给你

[cxbb666]

提供一个复现吧~

https://codesandbox.io/embed/vue-antd-template-forked-ovgjb?fontsize=14&hidenavigation=1&theme=dark
看看是不是这样弄的

[cxbb666]

提供一个复现吧~

https://codesandbox.io/s/vue-antd-template-forked-ovgjb?fontsize=14&hidenavigation=1&theme=dark
或者这个

[ajuner]

我这跑你的代码也没问题呀
你再检查一下？

[cxbb666]

我这跑你的代码也没问题呀
你再检查一下？

难道是vite的问题？

[cxbb666]

我这跑你的代码也没问题呀
你再检查一下？

你的是vite吗还是webpack

[ajuner]

我这跑你的代码也没问题呀
你再检查一下？

你的是vite吗还是webpack

跟这没关系吧

[cxbb666]

另一个人的webpack用这个也可以，我用vite就不行

[cxbb666]

我这跑你的代码也没问题呀
你再检查一下？

你的是vite吗还是webpack

跟这没关系吧

另一个人的webpack用这个也可以，我用vite就不行

[cxbb666]

我这跑你的代码也没问题呀
你再检查一下？

你的是vite吗还是webpack

跟这没关系吧

你的这个v-model会被渲染到html上面嘛

[ajuner]

不清楚了，等大佬回复吧~

[John60676]

see vuejs/babel-plugin-jsx#118

[cxbb666]

see vuejs/jsx-next#118

vite不支持，目前

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.