Closed
Description
The issue is when I load the initial options and make a query in this case i query no1. I then update the options, and no1 still appears i the options until i use a non-cached query. I think the issue is caching or there might be errors in the code.
I am simply trying to clear the options when this event is emitted. eventBus.$on('remove_all_options', this.changeOptions);
TreeSelect Component HTML
<div id="app" class="outerSelect">
<div id="TS_1" class="TS_1" >
<treeselect v-model="value" :multiple="true" :options="optionsData" placeholder="Markets"
:async="true"
:load-options="loadOptions"
ref="treeselect"
>
TreeselectJS
const simulateAsyncOperation = fn => {
setTimeout(fn, 750)
}
new Vue({
el: '#app',
data: {
value: null,
optionsData: [
],
},
created() {
eventBus.$on('remove_all_options', this.changeOptions);
},
Methods:
methods: {
triggerLoadOptions(){
console.log("should be making a callback")
this.$refs.treeselect.loadOptions({ callback: () => {} });
},
method2 loads the initial options
loadOptions(params) {
console.log("load options called")
console.log("called = ", window.glob_called)
if (window.glob_called === true) {
this.optionsData = []
this.value = null;
if (params && typeof params.callback === 'function') {
console.log("Performing callback for update")
params.callback(null, this.optionsData);
}
} else if (window.glob_called === false) {
simulateAsyncOperation(() => {
const initialOptions = [
{
id: 'No1',
label: 'No1',
children: [
{ id: 'suboption1', label: 'No1 Suboption 1' },
{ id: 'suboption2', label: 'No1 Suboption 2' },
],
},
];
this.optionsData = initialOptions
if (params && typeof params.callback === 'function') {
console.log("performing callback for load")
params.callback(null, this.optionsData);
}
});
}
},
method3 changes the options
changeOptions() {
window.glob_called = true
this.optionsData = [];
this.v_search_query = null;
this.$refs.treeselect.loadOptions({ callback: () => {} });
},
},
});
Metadata
Metadata
Assignees
Labels
No labels