https://github.com/itzvinoth/tiny-multi-select
Simple multi-select component created using VueJS
https://github.com/itzvinoth/tiny-multi-select
vue vuejs
Last synced: 2 months ago
JSON representation
Simple multi-select component created using VueJS
- Host: GitHub
- URL: https://github.com/itzvinoth/tiny-multi-select
- Owner: itzvinoth
- Created: 2018-08-04T08:00:59.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-30T15:06:55.000Z (over 7 years ago)
- Last Synced: 2025-10-04T21:24:43.268Z (9 months ago)
- Topics: vue, vuejs
- Language: JavaScript
- Size: 16.5 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Description
`tiny-multi-select` is a [Vue 2.0](https://vuejs.org) (vue multi select) plugin that allows you to select multiple values, much like [`vue-multiselect`](https://github.com/shentao/vue-multiselect). Right now it's in development stage. Still needs to update lot many things.
Find the npm package [`link`](https://www.npmjs.com/package/tiny-multi-select)
# Install and basic usage
```sh
$ npm install tiny-multi-select
```
### Demo
Find the working [demo](https://codesandbox.io/s/xv1wv3mqoo).
### For single select
```
import MultiSelect from 'tiny-multi-select'
export default {
components: {
MultiSelect
},
data() {
return {
options: [
{ name: 'AF', label: 'Afghanistan' },
{ name: 'BS', label: 'Bahamas' },
{ name: 'FR', label: 'France' },
{ name: 'IN', label: 'India' },
{ name: 'MC', label: 'Monaco' },
{ name: 'MN', label: 'Mongolia' },
{ name: 'MV', label: 'Maldives' },
{ name: 'PL', label: 'Poland' },
{ name: 'SG', label: 'Singapore' },
{ name: 'GB', label: 'United Kingdom' },
{ name: 'US', label: 'United States' }
],
sValue: {}
}
},
methods: {
onDropDownClick (value) {
this.sValue = value
}
}
}
```
### For multiple select
```
import MultiSelect from 'tiny-multi-select'
export default {
components: {
MultiSelect
},
data() {
return {
options: [
{ name: 'AF', label: 'Afghanistan' },
{ name: 'BS', label: 'Bahamas' },
{ name: 'FR', label: 'France' },
{ name: 'IN', label: 'India' },
{ name: 'MC', label: 'Monaco' },
{ name: 'MN', label: 'Mongolia' },
{ name: 'MV', label: 'Maldives' },
{ name: 'PL', label: 'Poland' },
{ name: 'SG', label: 'Singapore' },
{ name: 'GB', label: 'United Kingdom' },
{ name: 'US', label: 'United States' }
],
// set with initial selected values as like this [{ name: 'PL', label: 'Poland' }]
selectedValues: []
}
}
}
```
## Build Setup or Contributing
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```