Where is the best place to dynamically add filterDropdownItems based on an API response?

[ghost]

Where is the best place to dynamically add filterDropdownItems based on an API response? I have tried in beforeUpdate Vue method but it is calling onColumnFilter every second.

  beforeUpdate: function() {
    // create a list of values for currency column filter
    let uniqueCurrencies = this.companyDetails.company_currencies;
    let currencyColumn = this.columns.filter(function(obj) {
      return obj.field === total_amount_currency'
    });
    this.$set(currencyColumn[0], 'filterOptions', {
      enabled: true,
      placeholder: 'All',
      filterDropdownItems: uniqueCurrencies,
    });
  }

[alibaba258]

HI all,

i have the same problem. I try to add a filter on multiple columns. But the filters needs to be dynamicly loaded based on the value of an other filter. My Code works, but i get an extreme delay because of an infinite update loop.

Error Message:

vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in watcher with expression "columns"

found in

---> <VgtFilterRow>
       <VgtTableHeader>
         <VueGoodTable>
           <Anonymous>
             <Main> at src/views/Main.vue
               <App> at src/App.vue
                 <Root>

My Code:

onColumnFilter(params){
            // console.log('company.name' in params.columnFilters);
            if('company.name' in params.columnFilters)
            {

                const result = this.companies.find( companie => companie.name === params.columnFilters['company.name']);

                const groupColumn = this.columns.find(element => element.field == 'group.description');

                this.$set(groupColumn, 'filterOptions', {
                        enabled: true,
                        placeholder: 'Alle',
                        filterDropdownItems: result.groups,
                    });

            }
},

[mrriddwan]

You to change the return json response to match the required syntax.

//array
filterDropdownItems: ['Blue', 'Red', 'Yellow']
//or
filterDropdownItems: [  
  { value: 'n', text: 'Inactive' },  
  { value: 'y', text: 'Active' },  
  { value: 'c', text: 'Check' }  
],