Vue - Two way linking

by Ben Clayton

HTML

<div id="app">
  <h1>I heard a {{size}}, {{color}} dog chased you</h1>
  are you sure colour was <input v-model="color" />
  <doggie :size.sync="size" :color.sync="color" />
</div>

CSS

.doggie {
  border:1px solid brown;
  padding: 10px;
  margin-top:20px;
}

JavaScript

Vue.component('doggie', {
  template: `
    <div class="doggie">
      <h3>The {{size}}, {{color}} dog chased me</h3>
      <input :value="size" @input="$emit('update:size', $event.target.value)" />
      <input :value="color" @input="$emit('update:color', $event.target.value)" />
    </div>
  `,
  props: ['size', 'color'],
})

new Vue({
  el: '#app',
  data: {
    size: 'big',
    color: 'brown'
  },
  mounted() {
    const vm = this
    setInterval(() => { console.log('size', this.size, 'color', this.color); }, 3000);
  }
})