Vue Select2 Component

Intellectual property of Oneway.mobi

Requirement

• Vue 1.x
• jQuery ( available globally )
• Select2

Installation

npm i vue-select2-component -S

alternatively: <script src="dist/vue-select2-component.min.js"></script>
which exposes VueSelect2 as a global variable

Example

See here, source in example.html

I prefer inspecting it with devtools

Configuration

• @prop {String/String[]} model (.sync!), defaults to ''
• @prop {String} models (.sync!), defaults to ''
• @prop {Object[]} options (required!), must in [{ value: {String/Number}, text: {String} }] pattern
• @prop {Object} config, defaults to {}. Besides the basic configuration of Select2, we have some extra settings:
  • multiple: defaults to undefined ( Meaning default as a single select )
  • width: defaults to 100%
  • delimiter: defaults to , ( Only for multiple select )
  • showValInText: defaults to undefined. If set to true, the render result would be:

    <select>
      <option>(1) Apple</option>
      <option>(2) Banana</option>
      ...
    </select>

Build

npm run build