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

Question

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 class="row p-1 g-3 d-md-flex justify-content-md-end">
        <div class="col-4 d-flex flex-row-reverse">
            <label for="inputPassword6" class="col-form-label">{{ profileDataItem }}</label>
        </div>
        <div class="col-8">
            <input 
                type="text" 
                class="form-control" 
                :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 class="form-register p-3 m-auto">
        <form class="login-form p-3 border m-auto">
            <h4 class="text-center p-2">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>

sadeq shahmoradi · Accepted Answer · 2022-12-05 22:20:59Z

1

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

<template>
  <div class="row p-1 g-3 d-md-flex justify-content-md-end">
    <div class="col-4 d-flex flex-row-reverse">
      <label for="inputPassword6" class="col-form-label">{{
        profileDataItem
      }}</label>
    </div>
    <div class="col-8">
      <input
        type="text"
        class="form-control"
        :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>

answered Dec 5, 2022 at 22:20

sadeq shahmoradi

2,4631 gold badge15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

João Denari Over a year ago

Yes, Sadeq! I got it thankssss. Just to the others, I needed to update something in your tip. Here it is: @input="$emit('update:modelValue', $event.target.value)"

sadeq shahmoradi Over a year ago

happy to help my friend

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related