Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

Overview

@desislavsd/vue-select

Logo

npm (scoped) NPM npm bundle size (scoped) npm npm

Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

Demos & Docs

License

MIT License

Copyright (c) 2017

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Error Cannot read property 'value' of undefined

    Error Cannot read property 'value' of undefined

    Is there a way to disable the X which removes the selection? Or maybe I am doing something wrong, I just can't get around to fixing this issue.

    I have a list of options, when I select something it works fine, but if I click on X to remove selections, when I click submit i get this error cannot read property 'value' of undefined.

    opened by ishiki-arata 5
  • displays value instead of label if set programmatically

    displays value instead of label if set programmatically

    If a v-select is set up and the attribute it is v-model associated with is changed, it displays the value instead of the label until the v-select element is clicked, then it updates to properly display the label.

    This fiddle demonstrates the issue:

    https://jsfiddle.net/mevj407u/

    (Thanks for the great component!)

    opened by nklatt 3
  • Can I close the option list on clicking already selected item?

    Can I close the option list on clicking already selected item?

    Hello, I am wondering if there is a way to make the list close also when I click on an already selected item? Right now it does nothing and I have to click outside of the dropdown to close it.

    Thank you!

    opened by ishiki-arata 2
  • Question about the required attribute

    Question about the required attribute

    I'm trying to set the required attribute on the select but when I do so the option list isn't displayed until I type something in the search field. The behaviour I want is the default required behaviour so the browser warns the user.

    <vSelect required /> works as expected but it doesn't work if I use a prop to set the attribute i.e <vSelect :required="required" /> (omitted other props for brevity)

    opened by dubonzi 2
  • Duplicate keys detected

    Duplicate keys detected

    I am sorry but I cannot figure this out; moreover I am not sure why the end user should have to take care of this ? Isn't it possible to generate unique keys on the component side ?

    I have a simple year generated list like so :

    [ {label:'2000', value:2000 }, {label:'2001', value:2001 },etc...]

    and I get the duplicate key error. I use the component like this:

    <v-select v-model="creationYear" :from="createYearsList" :as="'label::value'" :closeOnSelect="true" :clearOnSelect="true" :clearOnClose="false" :tagging="false">
             <template v-slot:both="{ option }">
                     {{option.label}}
              </template>
    </v-select>
    

    For the life of me I cannot find the answer in your doc. Obvioulsy I must be doing something wrong because a unique key issue cannot happen ?

    Can you please clarify (hopefully with the doc) with some clear example on how to deal with that ?

    also why is the problem sometime going away if I do :as="'label:label:label'" ?? I have no idea... What is the difference between :: and : ?

    it seems that using :: return to me the full object (this is what I want) but : only returns the value in my v-model

    where do I take care of these keys ?

    Please help me understand.

    edit: I see in your code that you use :key="option.index" so that is going to create duplicates all the time right ? why don't you use :key="option.index+someUniqueIdentifier" ?

    opened by signmeuptwice 2
  • How do I resolve broken UI ?

    How do I resolve broken UI ?

    Hello,

    I like the plugin you've have but it looks like the ui is broken upon importing the component, this is how it looks. image

    How do I resolve the broken UI ? Any help would be great, thanks!

    <template>
        <div class="col pt-3">
            <div class="row">
                <p>
                    Test asdipkjaspodsahpfusdhfgjns d
                    zspdofuhasgjhaslkjfgblaksdjgposuhdfjasdahsd
                </p>
                <v-select
                    v-model="selected.browsers"
                    as="name:id:id"
                    :from="browsers"
                    tagging
                    :tag-keys="[9, 32, 188]"
                ></v-select>
            </div>
        </div>
    </template>
    
    <script>
    import { vSelect } from "@desislavsd/vue-select";
    export default {
        components: {
            vSelect
        },
    
        data() {
            return {
                selected: {
                    name: "",
                    browser: "",
                    browsers: [],
                    repos: []
                },
                browsers: [
                    { id: 1, name: "Internet Explorer" },
                    { id: 2, name: "Firefox" },
                    { id: 3, name: "Chrome" },
                    { id: 4, name: "Opera" },
                    { id: 5, name: "Safari" }
                ]
            };
        }
    };
    

    I noticed that the UI does not get imported from the package. How do I fix this problem?

    opened by jamols09 1
  • Have run into this issue

    Have run into this issue

    In just one of the selects, It displays the auto suggestions from google and replaces all my options. Here is an image. It shows ON TOP of the normal select.

    https://ibb.co/qDH3rqp

    opened by ishiki-arata 1
  • How to handle options from a large list of remote data

    How to handle options from a large list of remote data

    Very handy component, thank you. I use it with remote data sources for creating and editing records like in the following code. When creating a record it works great, but when editing a record the v-select's value (item.ServiceId in this example) will be displayed instead of the label. I noticed that an AJAX request to the from URL with an empty term parameter is sent that would grab the label that corresponds to the item.ServiceId value. This would work except that I have thousands of Services, so when the term parameter is empty my data source returns an empty array or the top 20 items since I have nothing to filter on and I'd rather not return 1000s of records.

    <v-select v-model="item.ServiceId" as="label:value" from="/api/Services?term=%s">
    
        <template v-slot:option="{ option }">
            <span>{{option.label}}</span>
        </template>
    
        <template v-slot:selected="{ option }">
            <span>{{option.label}}</span>
        </template>
    
    </v-select>
    

    I am wondering if you have a recommendation for handling this scenario.

    Two thoughts/feature requests that could address this:

    A. Provide a default label like in the following example. Note that if the value is empty/null the current logic could be used.

    <v-select v-model="item.ServiceId" as="label:value" from="/api/Services?term=%s" :default-label="item.ServiceName">...</v-select>
    

    B. Providing value as an additional parameter. The second %s would be replaced with the value of item.ServiceId in my example. I'd say I prefer this option because I'd need to jump through less hoops and having the value sent (with or without the label/term/text) could be very helpful for a variety of uses.

    <v-select v-model="item.ServiceId" as="label:value" from="/api/Services?term=%s&serviceId=%s">...</v-select>
    
    opened by jeremycook 1
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump websocket-extensions from 0.1.3 to 0.1.4

    Bump websocket-extensions from 0.1.3 to 0.1.4

    Bumps websocket-extensions from 0.1.3 to 0.1.4.

    Changelog

    Sourced from websocket-extensions's changelog.

    0.1.4 / 2020-06-02

    • Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin)
    • Change license from MIT to Apache 2.0
    Commits
    • 8efd0cd Bump version to 0.1.4
    • 3dad4ad Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser
    • 4a76c75 Add Node versions 13 and 14 on Travis
    • 44a677a Formatting change: {...} should have spaces inside the braces
    • f6c50ab Let npm reformat package.json
    • 2d211f3 Change markdown formatting of docs.
    • 0b62083 Update Travis target versions.
    • 729a465 Switch license to Apache 2.0.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump js-yaml from 3.12.1 to 3.13.1

    Bump js-yaml from 3.12.1 to 3.13.1

    Bumps js-yaml from 3.12.1 to 3.13.1.

    Changelog

    Sourced from js-yaml's changelog.

    3.13.1 / 2019-04-05

    • Fix possible code execution in (already unsafe) .load(), #480.

    3.13.0 / 2019-03-20

    • Security fix: safeLoad() can hang when arrays with nested refs used as key. Now throws exception for nested arrays. #475.

    3.12.2 / 2019-02-26

    • Fix noArrayIndent option for root level, #468.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Options not changing when updated programmatically

    Options not changing when updated programmatically

    I have three <vue-select/> components on a page. I am using the :from prop to supply a function that will load options based on the selected value from the first dropdown. But the options shown in the second dropdown is not updating while changing the options in first dropdown.

    It works perfectly fine for the first time. Once the options are loaded, it is not changing on the subsequent changes.

    opened by theashcodes 2
  • Stop selection from overflowing?

    Stop selection from overflowing?

    How do I stop the selected option from overflowing. If I select more filter that will have a total of more than the fields width. Id like it to show on the placeholder "3 filters selected" or something like that

    image

    Or probably something like this will do image

    opened by jamols09 1
  • Disabling select based on a boolean

    Disabling select based on a boolean

    I need to make the select disabled or enabled when I have activeEdit: true or false.

    :disabled="!activeEdit"

    I tried adding this to the but it does not work. Also tried readonly instead of disabled, doesn't work either. Any clue how to go around this?

    Thank you!

    opened by ishiki-arata 2
Owner
null
A better way to display select boxes when using `v-for` on objects.

vue-dropdowns A better way to handle v-for on objects. No special dependencies, no jquery, no bootstrap, just VueJS and CSS goodness. Demo Demo - http

Mike Rodham 93 Nov 16, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 39 Jul 10, 2022
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.4k Nov 30, 2022
A native-like select field, but better

A native-like select field, but better

Maksym Nesterov 18 Jun 1, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

POLITICO 11 Mar 14, 2022
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 26 Sep 19, 2022
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 541 Nov 21, 2022
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 25, 2022
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Nov 26, 2022
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 347 Aug 31, 2022
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 71 Nov 11, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 26, 2022
A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

Rahul Gaba 13 Sep 15, 2022
Super awesome select dropdown vue.js component.

v-super-select An accessible and customizable select/drop down component that features searching, grouping, and virtual scrolling. Try out the demo sa

Will 7 Mar 31, 2022
This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Valère 95 Apr 20, 2022
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Selecto.js Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch. Demo / API / Main Project ⚙️ Instal

Daybrush (Younkue Choi) 1.2k Nov 21, 2022