how to bind v-model to child component that contains input

Question

I have some components that look like this.

<template>
  <q-layout>
    <v-input v-model="something" />
  </q-layout>
</template>

<script>
import { QLayout } from 'quasar'
import { Input } from 'vedana'

export default {
  name: 'index',
  components: {
    QLayout,
    Input
  },
  data () {
    return {
      something: ''
    }
  }
}

this v-input component looks like this:

<template>
    <input
        :type="type ? type : 'text'"
        class="v-input"/>
</template>

<script>
export default {
    props: ['type'],
    name: 'v-input'
}
</script>

When I enter data into the input something does not bind to whatever is in the value of the input that is inside of v-input.

How do I achieve this?

You are importing Input but using v-input component ... am I missing something? — samayo
– samayo, Commented Mar 15, 2018 at 20:18
The <input> doesn't have a value or v-model binding, for starters. — Roy J
– Roy J, Commented Mar 15, 2018 at 20:35

tony19 · Accepted Answer · 2022-07-15 20:57:40Z

5

To enable the use of v-model the inner component must take a value property.

Bind the value to the inner <input> using :value, not v-model (this would mutate the prop coming from the parent). And when the inner <input> is edited, emit an input event for the parent, to update its value (input event will update the variable the parent has on v-model).

Also, if you have a default value for the type prop, declare it in props, not in the template.

Here's how your code should be

<template>
    <input
        :type="type"
        :value="value"
        @input="$emit('input', $event.target.value)"
        class="v-input" />
</template>

<script>
export default {
    props: {
      type: {default() { return 'text'; }},
      value: {}                              // you can also add more restrictions here
    },
    name: 'v-input'
}
</script>

Info about what props can have: Components / Passing data With Props.

Demo below.

Vue.component('v-input', {
  template: '#v-input-template',
  props: {
    type: {default() { return 'text'; }},
    value: {}                              // you can also add more restrictions here
  },
  name: 'v-input'
});

new Vue({
  el: '#app',
  data: {
    something: "I'm something"
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <p>Parent something: {{ something }}</p>
  <hr>
  Child: <v-input v-model="something" />
</div>

<template id="v-input-template">
   <input
      :type="type"
      :value="value"
      @input="$emit('input', $event.target.value)"
      class="v-input" />
</template>

edited Jul 15, 2022 at 20:57

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 15, 2018 at 20:47

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

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

1 Comment

Miguel Coder Over a year ago

Thanks, I ended up doing something similar to this, but I didn't pass the value down as a prop. I see why you did it that way and I may change it in the future, but I would like to keep it as minimal as possible.

tony19 · Accepted Answer · 2022-07-15 01:30:22Z

0

https://v2.vuejs.org/v2/guide/components.html#sync-Modifier

<template>
  <q-layout>
    <v-input :value.sync="something" />
  </q-layout>
</template>

<template>
    <input
    :type="type ? type : 'text'"
    v-model="inputVal"
    class="v-input"/>
</template>

<script>
export default {
    props: ['type', 'value'],
    name: 'v-input',
    data:function(){
        return {
            inputVal: ''
        };
    },
    watch:{
        value: function(newValue){
            this.$emit('update:value', newValue)
        }
    }
}
</script>

You need to pass your value to the input component using the .sync modifier so the changes will sync back to the parent.

edited Jul 15, 2022 at 1:30

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 15, 2018 at 20:36

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

2 Comments

Roy J Over a year ago

You're modifying a prop by using v-model on it.

Jeff Over a year ago

@RoyJ coming from vue 1 I had not realized the .sync modifier functionality had changed, thank you.

Collectives™ on Stack Overflow

how to bind v-model to child component that contains input

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related