Vue3 Form input creates problem with v-model and v-bind together

I am using Vue3 input form with Laravel and inertia . However now, it is not working. I can only add either v-model or v-bind in the input form. Why it is showing error? I could solve this way the problems in my previous projects .

Now Lara.mix is shwoing the follwoing error: error:

VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.


  <html> 
<body>
<tr  v-for="(user, uIndx) in users  " :key="uIndx" >
 <td >     {{ uIndx+1 }} </td>
  <td >  {{user.name}} </td>
  <!-- email  -->
 <td >{{user.email}} </td>
 <!-- Edit button  -->
<td class="px-6 py-4">
 <form @submit.prevent="submit">
 <input type="text"  id="name" v-bind:value="user.name"  v-model="form.name" /> 
<button type="submit" >Bearbeiten  </button>
</form> 
</tr>
<script>
 import { reactive } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
export default {
props:{
 users:  Array
},
   setup(){
       const form  =reactive({
          name :  "",
          email:  "",
       })
        function submit() {
              Inertia.post('/users', form)
        }
        return { form, submit }

   },
}
</script>
 </body>
</html>

Can anyone please help me ? How can I bind the programatically determined value with inertia input form.

mathematikboy

4 years ago

Level 5

I tried to solve this way but still the value of form.name cant be detected automatically . it works only if I once click on the input field and then submit the form. Any other idea?

<form @submit.prevent="submit">
    <input :value="user.name" @input = "form.name = $event.target.value" />
        <button type="submit" class="px-4 py-1 text-sm text-white bg-blue-400 rounded">
          Bearbeiten
        </button>
</form>

Please or to participate in this conversation.