vue-g-select v1.0.43

Select компонента для Vue2

Установка

Из репозитория:

    npm install --save-dev git+https://github.com/ibabasik/g-select.git

Подключение

Глобально:

    Vue.component('g-select',require('vue-g-select'));

Внутри конкретного компонента:

module.exports = {
    ...
    components: {
        'g-select': require('vue-g-select')
    },
    ...
}

Использование

    new Vue({
        el:'#root',
        data:{
            chosenId:1,
            pokemons:[
                {id:1, name:'Pikachu',type:'electric'},
                {id:2, name:'Bulbasaur',type:'grass'},
                {id:3, name:'Charmander',type:'fire'},
                {id:4, name:'Squirtle',type:'water'},
                {id:5, name:'Eevee',type:'normal'},
                {id:6, name:'Jigglypuff',type:'fairy'},
                {id:7, name:'Zubat',type:'flying'},
                {id:8, name:'Pidgey',type:'flying'},
                {id:9, name:'Rattata',type:'normal'},
                {id:10, name:'Drowzee',type:'psychic'},
                {id:11, name:'Paras',type:'grass'}
            ]
        }
    ...
    })

<g-select :options="pokemons" :bind-id="true" id-path="id" v-model="chosenId"></g-select>

Больше примеров в example.html

Параметры

События

input

Параметры события:

• выбранное значение
• выбранная опция

Параметры отличаются, если задан параметр bindId: в этом случае выбранное значение - это только идентификатор, а выбранная опция - весь объект

Использование v-model

Для двусторонней привязки выбранного значения вместо пары :value и @input можно использовать директиву v-model.

Шаблоны

item-template

Шаблон, как отображать выбранный элемент и элементы списка. Передаваемые параметры шаблона: item - объект-элемент из массива options

<g-select ...>
    <template slot="item-template" scope="props">
        <b>{{ props.item.name }}</b> ({{props.item.type}})
    </template>
</g-select>