Comments (8)
There are actually two ways to do that:
- either set
resolveOnLoad
totrue
which will load all async options initially and set the value after that: https://jsfiddle.net/6ev8zugr/ (I needed to tweakfetchLanguages
in the example so that it works with an empty query) - or you can set
object
totrue
and provide value as an object, like[{value:'Alice',label:'Alice'}]
: https://jsfiddle.net/6ev8zugr/1/
The first solution is more convenient to use in a forms when the values are being saved and loaded and has relatively few options. The second should be used for searches and autocomplete, when the values doesn't actually get saved or loaded but can have large amount results.
The second solution needs an update to 1.2.2
, because there was an issue with loading initial value (should work in the jsfiddle example though).
from multiselect.
Perfect -- thanks for the amazing support.
I look forward to seeing what you are able to do with vueform as a whole library.
from multiselect.
Thanks for the quick and very helpful reply!
I am able to get a lot closer with this, though I think in its current form the control is probably not designed to function as I am trying to make it. I was looking to implement a generic 'tags' element which allows:
-
any tag is valid, but there is auto-complete for suggestions. Appending the query value to returned options array achieves this, but would be nice as an option to not have to. Likewise existing tag values need to be appended too as valid options.
-
making v-model reactive. Currently I load the content of the page asynchronously (and it can change as the user navigates between records), so the tags are available 'late'. Updating the content of
v-model
doesn't trigger reloading of the options at all. As a work around I am forcing a:key
attribute on the control to destroy and re-create it as needed, but that feels like overkill.
from multiselect.
I'd recommend going through advanced props, and you'll probably find the config you're looking for: https://github.com/vueform/multiselect#advanced-props
You may set createTag
to true
which allows new tags to be created and appendNewTag
to false
if don't want the created tag to be appended to the options list. In that case you have to do that manually on @tag
event.
The v-model
should be reactive from version 1.2.1
.
from multiselect.
Thanks, really appreciate the responsiveness!
createTag
works great, I had misunderstood the purpose of that option.
For reactive-ness I was adding to the array (tags.push("x")
), not replacing the array (tags= ["x"]
). Replacing the whole array works great, as long as the values in the array match the previously returned options. See https://jsfiddle.net/p78zvtfj/5/
Is there a programmatic way to trigger a call to retrieve new options when the set has changed?
from multiselect.
tags.push("x")
should work too. What's the use case when it doesn't?
I've added an export for resolveOptions
method in 4946dff - that should refresh async options.
from multiselect.
That is awesome! The resolveOptions
callback works great, everything in my use case is fully functional now I think.
I've updated the fiddle at https://jsfiddle.net/p78zvtfj/6/ use tags.push("..")
instead of tags = [ "..." ]
in the setTags
functions. It works as expected with tags = ...
, but when using push
the data shown as text on the screen updates, but not the tags themselves.
from multiselect.
Glad it worked out! Fix released for array push in 1.2.3
along with the resolveOptions
export from yesterday.
Required directly new version in you example and it works: https://jsfiddle.net/yod5mb8e/
from multiselect.
Related Issues (20)
- Different clearIcon svg fill color for dark and light mode HOT 2
- focus() issue HOT 1
- Missing methods in Multiselect type
- Add focus/blur event emits HOT 1
- Clicking the clear icon HOT 1
- Typescript Build Error HOT 1
- can't add option with space in mobile
- Opening disabled input
- Select does not scroll to selected item when the list is large HOT 2
- `getOption` does not work when `value` is an object. HOT 1
- Empty values in createOption with trimmed value HOT 1
- Prop `closeOnScroll` doesn't work with `appendToBody`
- Expose loading state on async options HOT 1
- appendToBody on async options: dropdown position is incorrect for the first time appearance HOT 1
- [Feature Request] Choose positioning for appendToBody
- Expose default search/filter function
- issue with :append-to-body="true" in a modal. HOT 2
- In mode "Tags" with an array of objects, an error message should be shown when valueProp can not be found HOT 2
- Tags mode displaying tag count limit
- Potential Regression: emits null right after emitting the selected value in 2.6.8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from multiselect.