VueJs - What's The Correct Way to Create a Child Component With Input Fields

Question

I'm trying to use vuejs to display a list of instances of a child component. The child component has input fields that a user will fill in.

The parent will retrieve the array of data to fill in the child components (If any exists), but since they're input fields the child component will be making changes to the value (Which generates errors in the console, as child components aren't supposed to change values passed from the parent).

I could just be lazy and just do everything at the parent level (i.e. use a v-for over the retrieved array and construct the list of elements and inputs directly in the parent and not use a child component at all), but I understand that it's not really the vuejs way.

I'm not very familiar with child components, but I think if it was just static data I could just declare props in the child component, and fill it from the parent. However what I kind to need to do is fill the child component from the parent, but also allow changes from within the child component.

Could someone please describe the correct way to achieve this?

Thanks

tony19 · Accepted Answer · 2022-07-15 02:55:15Z

3

You can use inputs on child components. The pattern is like this (edit it's the same pattern for an array of strings or an array of objects that each have a string property as shown here):

data: function() {
  return {
    objects: [ { someString: '' }, { someString: '' } ]
  }
}

<the-child-component v-for="(object, i) in objects" :key="i"
  v-model="object.someString"
></the-child-component>

Then, in the child component:

<template>
  <div>
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
  </div>
</template>

export default {
  name: 'the-child-component',
  props: ['value'],
}

See it described here: https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

edited Jul 15, 2022 at 2:55

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 24, 2020 at 22:44

danh

62.7k10 gold badges100 silver badges139 bronze badges

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

6 Comments

Phil Over a year ago

If you're binding :value and @input on <the-child-component>, you might as well use v-model, ie <the-child-component v-model="someString"/>

danh Over a year ago

Thanks, @Phil. Edited.

Phil Over a year ago

Doesn't your child component need a value prop now?

user2058904 Over a year ago

@danh I don't think this will work for my use case. In the parent I want to render an array of child components, so I don't think I can use v-model in the way you describe. Could you please provide an example where an array of child components is used? For the sake of simplicity you can assume that it's just an array of components with a single string property if that easier to demonstrate.

danh Over a year ago

@Steviebob - same idea for an array of child components. See edit.

|

Collectives™ on Stack Overflow

VueJs - What's The Correct Way to Create a Child Component With Input Fields

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related