javascriptvue.jsvuejs3antdantdv

V-model not working in ant design input component vue 3


I am working with vue 3 and ant design 2x. I am tired trying this code. And I follow vue documentation, I feel something miss. I am stuck with this problem. I hope your conclusion.

           <a-form
               :model="form"
               @submit="handleSubmit"
           >
               <a-form-item class="mb-10">
                   <a-input
                       type="text"
                       v-model="form.name"
                       placeholder="Name"
                   >   
                   </a-input>
                   <a-button type="primary" block html-type="submit">
                       SUBMIT
                   </a-button>
           <a-form>

Thanks in advance for your help.


Solution

  • After spending plenty of hours, I got the solution from antv example in ant documentation. I update code like this. Different is I update v-model="form.name" to v-model:value="form.name"

               <a-form
               :model="form"
               @submit="handleSubmit"
            >
               <a-form-item class="mb-10">
                   <a-input
                       type="text"
                       v-model:value="form.name"
                       placeholder="Name"
                     >   
                   </a-input>
                   <a-button type="primary" block html-type="submit">
                       SUBMIT
                   </a-button>
           <a-form>