@st-kovalenko/vue-bootstrap-select NPM

Vue.js dropdown with search box

About

A component that allows you to search select options.

This project is a fork from the original Sandalf/vue-bootstrap-select project which is no longer maintained.

Requirements

Vue.js 3
Bootstrap CSS

Install

npm install @st-kovalenko/vue-bootstrap-select --save

Usage

import VueBootstrapSelect from '@st-kovalenko/vue-bootstrap-select'
import '@st-kovalenko/vue-bootstrap-select/dist/style.css'

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

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

Passing options

The options property accepts arrays of strings.

<VueBootstrapSelect :options="['Item 1', 'Item 2']" />

And arrays of objects

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

Props

parameter	description	type	default
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
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

Testing

Tested with the following configuration:

Node.js:
NPM:
Vue.js:

npm run serve

npm package vue bootstrap select alfsnd

vue3-click-away

@infinitebrahmanuniverse/nolb-_st-@everything-registry/sub-chunk-863

0.5.1

1 year ago

0.5.0

1 year ago