Vue get/set interface

by Edward Tanguay

HTML

<div id="vue">
  <child v-model="stuff"></child>
  {{stuff}}
  <hr>
  <selector v-model="selected"></selector>
  {{selected}}
</div>

JavaScript

new Vue({
	el:'#vue',
  data(){
  	return {
    	stuff:'Hello Vue!',
      selected:[]
    }
  },
  components:{
  	child:{
    	props:['value'],
    	template:`<input v-model="interface">`,
      computed:{
      	interface:{
        	get(){
          	return this.value
          },
          set(val){
          	this.$emit('input', val)
          }
        }
      }
    },
    selector:{
    	props:['value'],
      template:`
      <select v-model="interface" multiple>
       <option>A</option>
       <option>B</option>
       <option>C</option>
      </select>`,
      computed:{
      	interface:{
        	get(){
          	return this.value
          },
          set(val){
          	this.$emit('input', val)
          }
        }
      }
    }
  }
})