Vue-multiselect

Example fiddle for issue reproduction usage

by xlanex

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<div id="app">
  <my-component v-model="value"></my-component>
  <pre>{{ value }}</pre>
</div>

CSS

* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

Babel + JSX

var Child = {
	components: {
  	Multiselect: window.VueMultiselect.default
	},
	props: {
value: []
  },
	data() {
  	return {
        options: [
          { id: 'small', label: 'Small Size' },
          { id: 'medium', label: 'Medium Size' },
          { id: 'large', label: 'Large Size' },
          { id: 'xlarge', label: 'Extra Large Size' }
        ]
      }
	},
	  template: `<multiselect 
	  track-by="id" 
	  label="label" 
	  :options="options" 
    multiple="true"
	  @input="updateValue">
	  </multiselect>`,
	  methods: {
	  updateValue: function (value) {
	    this.$emit('input', value.id);
	  }
	},
  computed: {
  	internValue() {
    	return this.options.find(option => option.id === this.value);
    }
  }
};

var App = new Vue({
	components: {
    'my-component': Child
	},
  data: {
  	value: 'medium'
  }
}).$mount('#app')