Vue get/set interface

by Edward Tanguay

HTML

<div id="vue">
  <multilanguageselector v-model="sourceLanguages"></multilanguageselector>
  {{sourceLanguages}}
  <hr/>
  <multilanguageselector v-model="targetLanguages"></multilanguageselector>
  {{targetLanguages}}
</div>

JavaScript

new Vue({
	el:'#vue',
  data(){
  	return {
      sourceLanguages:[],
      targetLanguages:[]
    }
  },
  components:{
    multilanguageselector:{
    	props:['value'],
      template:`
      <select v-model="interface" multiple>
       <option value="en">English</option>
       <option value="de">German</option>
       <option value="fr">French</option>
      </select>`,
      computed:{
      	interface:{
        	get(){
          	return this.value
          },
          set(val){
          	this.$emit('input', val)
          }
        }
      }
    }
  }
})