desislavsd / vue-select Goto Github PK
View Code? Open in Web Editor NEWLightweight and mighty select component like Chosen and Select 2 done the Vue way.
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.
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.
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
},
},
When clicking the clear button, under some circumstances, a new option is selected right after clearing.
multiple
propThe component shouldn't contain any selected options.
The value that sits under the clear button gets selected, so you end up with one selected option right after clearing.
mouseup
event instead of mousedown
on the clear button.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"
?
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>
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.
Could you add a placeholder prop to change the default 'Search..' when no value is selected ?
Thank you
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!)
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?
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!
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)
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!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.