<template>
	<div>
		<h2>Multiple Select</h2>
		<Label for="c1" align="top">Select values:</Label>
		<ComboBox inputId="c1" style="width:300px"
				v-model="value"
				:data="data" 
				:multiple="true"
				:textFormatter="formatText"></ComboBox>
		<p v-if="value">Selected values: {{value | json}}</p>
	</div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      data: this.getData()
    };
  },
  methods: {
    getData() {
      return [
        { value: 11, text: "Mr. Nice" },
        { value: 12, text: "Narco" },
        { value: 13, text: "Bombasto" },
        { value: 14, text: "Celeritas" },
        { value: 15, text: "Magneta" },
        { value: 16, text: "RubberMan" },
        { value: 17, text: "Dynama" },
        { value: 18, text: "Dr IQ" },
        { value: 19, text: "Magma" },
        { value: 20, text: "Tornado" }
      ];
    },
    formatText(value) {
      if (this.value && this.value.length > 3) {
        return this.value.length + " items selected";
      }
      return value;
    }
  }
};
</script>