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" @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')