Real time update between 2 components?

Question

Is it possible to have a realtime update of input fields between two components?

In a component I have an input field which has a v-model="value". I wanna pass that input realtime to the other component and fill it into that input field.

Data of inputValue should be passed to the component 2 as value props. Or maybe I'm wrong with my result?

COMPONENT 1

<template>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="global-{{element}}" v-model="inputValue">
        <label class="mdl-textfield__label" for="global-{{element}}">{{ label }}</label>
    </div>
</template>

COMPONENT 2

<template>
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input name="items[{{prop1}}][{{element}}]" value="{{value}}" class="mdl-textfield__input"
               type="text" id="{{element}}">
        <label class="mdl-textfield__label" for="{{element}}">{{ label }}</label>
    </div>
</template>

<script>
    export default{
        props: ['prop1', 'element', 'value', 'label']
     }
 </script>

I tried with ...

this.$dispatch('tag-update', this.inputValue);

... but I need an @keyup.xx. But that's not what I want. I want it to update as soon as I pressed and released a letter, number etc.

Answer 1

You can certainly achieve this with events, or you can move the inputValue up to the parent component or root and pass it to each component as a synced prop.

http://jsfiddle.net/gtmmeak9/118/

The second component doesn't have to be synced if you just want one way binding on it.