CODEWITHSUNDEEP
vuejs3v-model
Nagisa Ando
Nagisa Ando

Reputation: 295

How to pass v-model value to child's child component in Vue 3

how can I pass the v-model value from parent component to child's child component?

Parent component

<ChildElement v-model="name" />

<script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref('Nagisa')
  }
};
</script>

Child component

<AnotherChildComponent :value="value"/>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  emits: ['update:modelValue']
};
</script>

AnotherChild component

<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ""
    }
  },
  emits: ['update:modelValue'],
  setup() {
  }
};
</script>

This works when I want to update parent component name value from AnotherChild component, however the default name value ('Nagisa') will not render in AnotherChild component just stays empty string in input.

Vuex is not option, I want to directly pass from parent component. Thank you for your help.

Upvotes: 3

Views: 7990

Answers (1)

jacob_frankovic
jacob_frankovic

Reputation: 332

When you want to pass any component attributes, you need to usethe exact name you entered in props object of child component. For example..

In AnotherChild component's setup, you have prop with name modelValue, with default value of empty string.

props: {
    modelValue: {
      type: String,
      default: ""
    }
},

But, in its parent element, ChildComponent, you pass the value with name value,

<AnotherChildComponent :value="value"/>

which will not work, because you do not have any prop named value in AnotherChild Component, and so modelValue uses its default value of empty string. You need to pass the value as attribute with the prop name, like this:

<AnotherChildComponent :model-value="value"/>

This applies also to Child Component's parent and so on...

Upvotes: 5

Related Questions