https://github.com/webreinvent/vaah-vue-select
A simple native Vue.js component for Select html tag
https://github.com/webreinvent/vaah-vue-select
dropdown select vue vuecomponent vuecomponents vuejs
Last synced: 3 months ago
JSON representation
A simple native Vue.js component for Select html tag
- Host: GitHub
- URL: https://github.com/webreinvent/vaah-vue-select
- Owner: webreinvent
- Created: 2019-05-28T14:12:33.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-03T10:16:15.000Z (about 7 years ago)
- Last Synced: 2026-04-14T09:17:31.487Z (3 months ago)
- Topics: dropdown, select, vue, vuecomponent, vuecomponents, vuejs
- Language: JavaScript
- Homepage: https://www.webreinvent.com
- Size: 58.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vaah-vue-select
> A simple native Vue.js component for Select html tag
Please consider starring the project to show your :heart: and support.
## Install
Install with [npm](https://www.npmjs.com/):
```sh
npm i vaah-vue-select
```
Register the component
```sh
import Vue from 'vue'
import vhSelect from 'vaah-vue-select'
Vue.component('vh-select', vhSelect)
```
You can pass following properties to the vue components:
```html
```
Explanation
- `v-model`: It is the selected value
- `:options`: An array of values to render options of the select tag
- `select_class`: Class attribute value of the select tag
- `option_key`: Key name of the array which will set the `value` attribute of the option
- `option_text`: Key name of the array which will set the text of the option
Example 1:
```js
...
data()
{
let obj = {
//options: ['IN', 'US'],
options: [
{
code: "IN",
name: "India",
},
{
code: "US",
name: "United States",
}
],
selected_val: 'US',
};
return obj;
}
...
```
To create a select dropdown we'll pass the following value:
```html
```
Example 2:
```js
let options = [
{
id: 1,
name: 'India',
},
{
id: 2,
name: 'United States',
}
];
let selected_id = 1;
```
To create a select dropdown we'll pass the following value:
```html
```
Example 2:
```js
let options = ["Apple", "Orange"];
let selected = "Orange";
```
To create a select dropdown we'll pass the following value:
```html
```
## Support us
[WebReinvent](https://www.webreinvent.com) is a web agency based in Delhi, India. You'll find an overview of all our open source projects [on github](https://github.com/webreinvent).
## License
The MIT License (MIT). Please see [License File](LICENSE) for more information.
#### Credits:
- To generate vue npm package:
https://github.com/team-innovation/vue-sfc-rollup
- To check download stats:
http://npm-stats.org/#/vaah-vue-select