vue-treeselect
vue-treeselect copied to clipboard
riophae
Default selected label with async mode
First of all, great job for this component!
I have a little problem, I use your component with the "async" mode to search possible values with ajax request. In my application when the user loads the page, I initialize previously saved values with an array of ids in the v-model attribute. But with the props async, the component do not do the first request "LOAD_ROOT_OPTIONS" to retrieve labels corresponding to the IDs, so the label of the item is "XX (unknown)".
If I remove the "async" props, it works well but the user cannot search for new items to add.
Tell me if I did something wrong, or if there is any other method to load default values labels.
Thanks.
Perhaps a better title for this issue would be "LOAD_ROOT_OPTIONS not compatible with async search" - that's the core problem and what I just ran into. I need to prepopulate the list with delayed loading (of child nodes) and still allow async search, but this doesn't appear possible.
In the meantime, it seems that the best solution is just to move the logic for fetching the initial results out of the loadOptions event callback and into your app's mounted or created hooks.
One way I think I would approach fixing this is that when we send the initial array of IDs in the v-model attribute, there could be a capability to send an array of IDs with default labels.
I have addressed this with a bit of a hack
When I know everything is rendered (i.e. the treeselect component)..... from the parent
this.$refs.reference.forest.nodeMap[this.default_label_id].label = this.default_label;
- where reference is the reference I gave the treeselect component
- default_label_id is the ID that I know the record is set to
- default_label is the label that corresponds to the default ID
This works - be much nicer if in the component - but the above approach is functional
@SwithFr The solution (at least how I have fixed) is as per my 30th November note. Not ideal, but it does at least do it!
There's a defaultOptions prop that works in async mode. No deferred loading, unfortunately, you have to supply the options beforehand.
As of now, @alexbainbridge 's solution still seems to be the only way to resolve this.
Is there anything planned to implement into the component?
@riophae Is there anything planned to implement into the component? please help... i need it
Like @beowulfenator mention, I use defaultOptions. But had to preload the options first tho.
<template>
<treeselect
v-model="myValue"
:async="true"
:multiple="true"
:defaultOptions="options"
:load-options="loadOptions"
placeholder="Enter your tag"
/>
</template>
export default {
props: {
url: String,
name: String,
value: Array,
my_options: Array
},
data() {
return {
myValue: this.value,
options: []
};
},
created: function() {
this.options = this.my_options.map(v => {
return { id: v, label: v };
});
},
methods: {
loadOptions({ action, searchQuery, callback }) {
}
}
}
Like @beowulfenator mention, I use defaultOptions. But had to preload the options first tho.
...
Additionally, you can do:
mounted() {
this.$nextTick(() => {
this.options = null;
})
}
This will remove the default options after the VueTreeselect has been rendered, so they don't show in the dropdown when you click on the input field.
defaultOptions : The default set of options to show before the user starts searching. Used for async search mode. When set to true, the results for search query as a empty string will be autoloaded. (Vue-Treeselect Documentations)
example :
<treeselect v-model="filters.blog_id"
:load-options="loadBlogOptions"
:async="true"
:multiple="false"
:defaultOptions="defaultBlogs"
class="form-control"
placeholder="Choose Blog"/>
