@makstech/vue-bootstrap-select

A vue version of bootstrap select

Demo

Install

npm install @makstech/vue-bootstrap-select --save

Usage

import VSelect from '@makstech/vue-bootstrap-select'

export default {
  name: 'app',
  components: {
    VSelect
  },
  data() {
    return {
      selectedValue: null
    };
  }
}

<template>
  <div id="app">
    <v-select :options="[{value: 1, text: 'Item 1'}, {value: 2, text: 'Item 2'}]" v-model="selectedValue" />
  </div>
</template>

<style lang="scss">
@import "~bootstrap-select/sass/bootstrap-select.scss";
</style>

Passing options

The options prop accepts arrays of strings

  <v-select :options="['Item 1', 'Item 2']" />

And arrays of objects

<v-select :options="[{value: 1, text: 'Item 1'}, {value: 2, text: 'Item 2'}]" />

Props

| parameter | description | type | default | acceptable value | | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------ | ---------------- | | disabled | disables select | Boolean | false | | | disabledProp | allows to disable specific options. If an option has this prop set to a truthy value it will disable the option. | String | disabled | | | labelNotFound | text displayed when no option is found in the search results | String | No results matched || | labelSearchPlaceholder | placeholder text for search input | String | Search | | | options | list of options | Array | [] | | | searchable | display search input | Boolean | false | | | searchClass | search input class | | showDefaultOption | sets the select title is set as an option | Boolean | false | | | textProp | the option's prop that is displayed as the option's text | String | text | | | valueProp | the option's prop that is used to find the selected value | String | value |