desislavsd / vue-select Goto Github PK

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.

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

When clicking the clear button, under some circumstances, a new option is selected right after clearing.

Process

1. Set multiple prop
2. Select as many options as necessary to make the input span two lines
3. Click the clear button

Expected result

The component shouldn't contain any selected options.

Current result

The value that sits under the clear button gets selected, so you end up with one selected option right after clearing.

Possible Fix

• Listen for the mouseup event instead of mousedown on the clear button.

Animated GIF showing the issue

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" ?

Hello,

Sorry if I am missing something but I am using your doc for some time without managing to understanding what I am doing wrong.

I would like to create your Async example.

I am having errors : – "index field is required when working with non primitive options" and Avoid using non-primitive value as key, use string/number value instead. for which I tried to provide an index option on the vSelect component.

the component is like so :

template:

<v-select v-model="message. recipient"
                      :value="message. recipient"
                      as="label:value"
                      :from="'/user-find?q='"
                      :parse="formatList"
                      :option="option"
                      :debounce="100"
                      :closeOnSelect="true"
            >

<template v-slot:both="{ option }">
     <img :src="option.raw.image" :alt="option.label" width="20"> {{option.label}}
</template>
                
</v-select>

the scripts

import { vSelect } from '@desislavsd/vue-select'

export default {
        name: "newMessageComponent",
        components:{
            vSelect
        },
        data(){
            return{
                message:{
                    recipient:null,
                    content:''
                },
                items: [],
                sending: false,
                option:{
                    index:'someindex'
                }

            }
        },
        computed: {
        },
        mounted() {

        },
        methods: {
            formatList(data){
                let items = []
                JSON.parse(data).forEach(user => {
                    items.push({
                        value: user.value,
                        label: user.label,
                        image: user.image,
                    })
                })
                return items
            },
         

        },

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!

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)

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!)

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

Or probably something like this will do

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!

Could you add a placeholder prop to change the default 'Search..' when no value is selected ?

Thank you

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>

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.

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?

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.