MultiSync MultiSelectOption

by Travis Smith

HTML

<div id="vue">
  <multi-sync :operator.sync="condition.operator" :value.sync="condition.value"></multi-sync>
  <h5>
    {{ condition }}
  </h5>
</div>

JavaScript

new Vue({
  el: '#vue',
  data() {
    return {
      condition: {
        operator: 'Equals',
        value: [{name: 'California', temp: 'warm'}]
      }
    }
  },
  components: {
    multiSync:{
    	props: {
      	operator: {
        	type: String
        },
        value: {
          type: Array,
          default: [] //value for multi-select must be array, not undefined
        }
      },
      template: `
        <div>
          <input v-model="sync_operator">
          <select multiple v-model="sync_value">
          	<option :value="option" v-for="option in options">{{ option.name }}</option>
          </select>
        </div>`,
      computed:{
      	sync_operator: {
          get() {
              return this.operator
            },
            set(val) {
              this.$emit('update:operator', val)
            }
        },
        sync_value: {
          get() {
              return this.value
            },
            set(val) {
              this.$emit('update:value', val)
            }
        }
      },
      data: function() {
      	return {
        	options: [{name: "Alaska", temp: "cold"}, {name: "Alabama", temp: "cold"}, {name: "California", temp: "warm"}, {name: "Texas", temp: "hot"}]
        }
      }
    }
  }
})