\n Vue2.js select with serverside pagination, multiselect option\n
\n\n
\n\n## Install\n\n``` bash\nnpm install lb-vue-select --save\n```\n\nInclude plugin in your `main.js` file.\n\n```js\nimport Vue from 'vue'\nimport lbVueSelect from 'lb-vue-select';\nVue.component('lb-vue-select', lbVueSelect);\n```\n\n## Using\n\ntemplate code\n\n```html\n\n \n\n```\n\nscript code\n\n```js\nexport default {\n data(){\n return {\n value: '1',\n //value: '1,2' - in case of multiselect\n totalCount: 300, //optional\n list: [\n {\n key: '1',\n value: 'First option'\n },\n {\n key: '2',\n value: 'Second option'\n }\n ],\n pagination: {\n query: '',\n currentPage: 1,\n limit: 20,\n initialId: [],\n searchTimeout: false\n }\n }\n },\n watch:\n {\n 'pagination.query'(query)\n {\n //when someone queries, do the store reload here\n },\n 'pagination.currentPage'(page)\n {\n //when someone changes the page, do the store reload here\n }\n }\n};\n```\n
\n\n\n## Available settings\n\n| Property | Type | Required | Description |\n| :---------------- | :-- | :-- | :-- |\n| value (v-model) | string | * | Value string, in case of multiselect, separated by comma ',' |\n| list | [Object] | * | Array of objects containing values |\n| display-field | string | | Display field key form list item object (Defaults to key) |\n| display-func | function | | If you want to combine multiple fields to display text, you can specify custom function which receives one argument (item) |\n| value-field | string | | Value field key form list item object (Defaults to value) |\n| multiselect | boolean| | If you want to enable multiselect (Defaults to false) |\n| select-all | string| | Text that will be placed next to checkbox for selecting all options. Available only along with :multiselect=\"true\". If not provided, checkbox will not be available |\n| all-selected-text | string| | Text that will be displayed in input instead of all checked options when there are more then 5 selected options. |\n|searchBox | boolean| | searchBox will appear if set to true. |\n| empty | boolean | | If you want to enable deselection of value (Defaults to false) |\n| pagination | object | | In case you use pagination, object as in example |\n| totalCount | int | | In case you use pagination in select, total count of all items |\n| searchPlaceholder | string | | Placeholder for pagination search, if using vue-i18n it will use key 'SEARCH', if omited will use \"Search\"\n| itemsPlaceholder | string | | Placeholder for pagination items per page selector, if using vue-i18n it will use key 'ITEMSPERPAGE', if omited, will use \"Items per page\" |\n| css | string | | Class to use on input (Defaults to form-control) |\n| disabled | boolean | | Disables input if set to true (Defaults to false) |\n\n
\n\n## Available events\n\n| Event | Arguments | Description |\n| :---------------- | :-- | :-- |\n| click | - | |\n| change | value | New value |\n\n
![](\"https://www.leapbit.com/branding/logo.png\"){kind=logo}
![\"lb-vue-select\"](\"https://gitlab.com/leapbit-public/lb-vue-select/raw/master/screen.png\")