ipl-select

View Source

<ipl-select
    v-model="selectedOption"
    :options="[
        { name: 'Option 1', value: 'opt1' },
        { name: 'Option 2', value: 'opt2', additionalData: 'test-additional-data' },
        { name: 'Option 3', value: 'opt3' },
        { name: 'Option 4', value: 'opt4' }
    ]"
    :disabled="disabled"
    label="Select"
/>

Accessing additional data in options

By default, <select> elements only allow their values to be expressed as strings. To provide access the full data of the option passed into this component, the update:modelValue event passes the full option object as the second parameter of the event. Besides the required name and value parameters, these objects may contain any arbitrary data. (Try selecting "Option 2" in the above example.)

Option Groups

View Source

<ipl-select
    v-model="selectedOption"
    :option-groups="[
        {
            name: 'First Group',
            options: [
                { name: 'Option 1', value: 'opt1' },
                { name: 'Option 2', value: 'opt2', additionalData: 'test-additional-data' }
            ]
        },
        {
            name: 'Second Group',
            options: [
                { name: 'Option 3', value: 'opt3' },
                { name: 'Option 3', value: 'opt4' }
            ]
        }
    ]"
    :disabled="disabled"
    label="Select"
/>