Package Exports

vue-select-picker-bootstrap

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-select-picker-bootstrap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Select Picker

It's for VueJs developers for rendering selectpicker in components.

Installation

npm i vue-select-picker-bootstrap

Properties

prop	type	Default	Description
defaultTitle	String	Nothing Selected	Title as showing default on selectbox.
searchable	Boolean	false	Options search functionality.
disabled	Boolean	false	For disabling selectbox.
searchPlaceholder	String	Search	Placeholder on search text field.
searchNotFound	String	No results matched	When option not found after search.
addClass	String	null	Add extra class for style or any other purpose if needed.

Basic Example Code:

<template>
    <VSelect
          v-model="selected"
          :options="countries"
        />
</template>

<script>
import VSelect from "@/vue-select-picker-bootstrap";
export default {
  name: "App",
  components: {
    VSelect
  },
  data() {
    return {
      countries: [
        { value: 1, text: "Pakistan" },
        { value: 2, text: "China" },
        { value: 3, text: "Bangladesh" },
        { value: 4, text: "USA" },
        { value: 5, text: "Australia" },
      ],
      selected: {value: null},
    };
  }
};
</script>

For Default Selection: Example (Bangladesh will be default selected)

export default {
  name: "App",
  components: {
    VSelect
  },
  data() {
    return {
      countries: [
        { value: 1, text: "Pakistan" },
        { value: 2, text: "China" },
        { value: 3, text: "Bangladesh" },
        { value: 4, text: "USA" },
        { value: 5, text: "Australia" },
      ],
      selected: {value: 3},
    };
  }
};

Example:

<script>
import VSelect from "@/vue-select-picker-bootstrap";
export default {
  name: "App",
  components: {
    VSelect
  },
  data() {
    return {
      stateOptions: [
        { value: 1, text: "<i class='fa fa-circle' style='color:green;'></i> Enable" },
        { value: 0, text: "<i class='fa fa-circle' style='color:red;'></i> Disabled" },
      ],
      selected: {value: 0},
    };
  }
};
</script>