v-model inside a component is not listening to events vuejs-CodePudding

I need to make a dynamic v-model using v-for. I have a child component that will be used inside the father component.

I'll put the full code and the warning received.

It is funny because I use the same method in other project (NUXT) and it is working just fine. And this project (vuejs) has the same code and it is not.

It is seems to me it is not listening to 'event' and because of that the v-model is not working well. The v-model value does not update according to the changes on input space.

This is the Child Component

<template>
    <div >
        <div >
            <label for="inputPassword6" >{{ profileDataItem }}</label>
        </div>
        <div >
            <input 
                type="text" 
                 
                :value="value"
                @input="$emit('input', $event.target.value)"
            >
        </div>
    </div>
</template>

<script>
export default {
    name: 'RegisterField',
    props: {
        profileDataItem: {
            type: String,
            required: true
        },
        value: {
            required: true
        },
    }
}
</script>

And this is the father component

<template>
    <div >
        <form >
            <h4 >Register yourself</h4>
            <RegisterField
                v-for="(item, index) in profileDataItems" 
                :key="index"
                :profileDataItem="profileItems[index]"
                v-model="item.model"
            >
            </RegisterField>
        </form>
    </div>
</template>

<script>
import RegisterField from './RegisterField.vue'
import ButtonSubmit from '../ButtonSubmit.vue'
export default {
    name: 'RegisterForm',
    components: {
        RegisterField,
        ButtonSubmit
    },
    data () {
        return {
            profileItems: ['First Name', 'Last Name', 'Email', 'Password', 'Confirm Password'],
            profileDataItems: [
                { model: "firstName" },
                { model: "lastName" },
                { model: "email" },
                { model: "password" },
                { model: "confirmPassword" },                
            ],
            payloadProfileData: [],
        }
    },
}
</script>

Warning on console

[Vue warn]: Missing required prop: "value" 
  at <RegisterField key=4 profileDataItem="Confirm Password" modelValue="confirmPassword"  ... > 
  at <RegisterForm> 
  at <SigninPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>

CodePudding user response：

change value prop to modelValue your component's code should be this:

<template>
  <div >
    <div >
      <label for="inputPassword6" >{{
        profileDataItem
      }}</label>
    </div>
    <div >
      <input
        type="text"
        
        :value="modelValue"
        @input="$emit('input', $event.target.value)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'RegisterField',
  props: {
    profileDataItem: {
      type: String,
      required: true,
    },
    modelValue: {
      required: true,
    },
  },
};
</script>