Stats

161 Contributors: 1 Monday, March 6, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial: riptutorial@gmail.com
Roadmap: roadmap

Custom Components with v-model

Introduction

Often times we have to create some components which perform some actions/operations on data and we require that in the parent component. Most of the times vuex would be a better solution, but in cases where the child component's behavior has nothing to do with application state, for instance: A range-slider, date/time picker, file reader

Having individual stores for each component each time they get used gets complicated.

Remarks

To have v-model on a component you need to fulfil two conditions.

  1. It should have a prop named 'value'
  2. It should emit an input event with the value expected by the parent components.

<component v-model='something'></component>

is just syntactic sugar for

<component
    :value="something"
    @input="something = $event.target.value"
>
</component>

Related Examples