Select2

Select2 can take a regular select box. By default it supports all options and operations that are available in a standard select box,but with added flexibility. For more details

Single Select Boxes
HTML Code

<Select2 :options="Options1"  :settings="{ width: '100%' }" />
Script

import Select2 from 'vue3-select2-component'
export default {
  name: 'select2',
  components: { Select2 },
  data () {
    return {
      inputVal: '',
      Options1: ['Alabama', 'Amalapuram', 'Arizona', 'Colorada', 'Idaho', 'Montana', 'Anakapalli', 'Akkayapalem', 'Nebraska', 'New Maxico', 'North Dakota', 'Utah', 'Wyoming']
    }
  },
  methods: {
    myChangeEvent (val) {
    },
    changeOptions () {
      console.log(this.myOptions)
    }
  }
}
Multiple Select Boxes
HTML Code

<Select2 :options="Options2"  :settings="{ width: '100%', multiple: true }" @change="myChangeEvent($event)"/>
Script

import Select2 from 'vue3-select2-component'
export default {
  name: 'select2',
  components: { Select2 },
  data () {
    return {
      inputVal: '',
      Options2: ['Alabama', 'Amalapuram', 'Arizona', 'Colorada', 'Idaho', 'Montana', 'Anakapalli', 'Akkayapalem', 'Nebraska', 'New Maxico', 'North Dakota', 'Utah', 'Wyoming']
    }
  },
  methods: {
    myChangeEvent (val) {
    },
    changeOptions () {
      console.log(this.myOptions)
    }
  }
}
Previous Next