vaah-vue-select

    1.6.0 • Public • Published

    vaah-vue-select

    A simple native Vue.js component for Select html tag

    Please consider starring the project to show your ❤️ and support.

    Install

    Install with npm:

    npm i vaah-vue-select

    Register the component

    import Vue from 'vue'
    import vhSelect from 'vaah-vue-select'
    
    Vue.component('vh-select', vhSelect)

    You can pass following properties to the vue components:

    <vh-select v-model="selected_value" :options="[]" select_class="form-control" option_value="" option_text="" 
    default_text="Select option"></vh-select>

    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:

    ...
    
    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:

    <vh-select :value="selected_value" :options="options" option_key="code" option_value="name" 
    default_text="Select Country"></vh-select>

    Example 2:

    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:

    <vh-select :value="selected_id" :options="options" option_value="id" option_text="name" 
    default_text="Select Country"></vh-select>

    Example 2:

    let options = ["Apple", "Orange"];
    
    let selected = "Orange";

    To create a select dropdown we'll pass the following value:

    <vh-select :value="selected" :options="options" default_text="Select Fruit"></vh-select>

    Support us

    WebReinvent is a web agency based in Delhi, India. You'll find an overview of all our open source projects on github.

    License

    The MIT License (MIT). Please see License File for more information.

    Credits:

    Keywords

    none

    Install

    npm i vaah-vue-select

    DownloadsWeekly Downloads

    15

    Version

    1.6.0

    License

    none

    Unpacked Size

    18 kB

    Total Files

    6

    Last publish

    Collaborators

    • webreinvent