Pre-populate tags about multiselect HOT 8 CLOSED

There are actually two ways to do that:

• either set resolveOnLoad to true which will load all async options initially and set the value after that: https://jsfiddle.net/6ev8zugr/ (I needed to tweak fetchLanguages in the example so that it works with an empty query)
• or you can set object to true 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.