Skip to content

Cache causing issues when changing options dynamically. #442

Closed
@43Laboratories

Description

@43Laboratories

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions