Webpack

Importing JavaScript

Import Multiple Select’s JavaScript by adding this line to your app’s entry point (usually index.js or app.js):

import 'multiple-select/dist/multiple-select.js'

Of course, you can also import the locales you need:

// import locale
import 'multiple-select/dist/locale/multiple-select-zh-CN.js'

By default, Multiple Select is dependent on jQuery, which is defined as peer dependencies. This means that you will have to make sure to add both of them to your package.json using npm install—-save jquery.

Importing CSS

Import Multiple Select’s CSS by adding this line to your app’s entry point:

import 'multiple-select/dist/multiple-select.min.css'

Usage

<template>
  <div class="hello">
    <MultipleSelect
      v-model="months"
      name="months"
      width="200"
      :options="options"
      @change="onChange"
    >
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </MultipleSelect>
  </div>
</template>

<script>
export default {
  data () {
    return {
      months: [],
      options: {
        filter: true
      }
    }
  },
  methods: {
    onChange () {
      console.log(this.months)
    }
  }
}
</script>

Starter template

There is an vue-starter example in our project.

plugins/jquery.js

import jQuery from 'jquery'
window.$ = window.jQuery = jQuery

plugins/select.js

import 'multiple-select/dist/multiple-select.min.css'

import './jquery.js'
import Vue from 'vue'
import 'multiple-select/dist/multiple-select.js'
import MultipleSelect from 'multiple-select/dist/multiple-select-vue.js'

Vue.component('MultipleSelect', MultipleSelect)

main.js

import './plugins/select.js'

View.vue

<template>
  <div class="hello">
    <MultipleSelect
      v-model="months"
      multiple
      name="months"
      width="200"
      :options="options"
      @change="onChange"
    >
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </MultipleSelect>
  </div>
</template>

<script>
export default {
  data () {
    return {
      months: [],
      options: {
        filter: true
      }
    }
  },
  methods: {
    onChange () {
      console.log(this.months)
    }
  }
}
</script>