VueGoodTable filter dropdown options vue2

Question

I'm trying to populate possible dropdown options on vue good table. The idea is that I conduct an API call to the server to bring back what values can possibly go into the drop down and I'm trying to assign it to the column filter. However, I can't seem to get it to work.

  <vue-good-table
    :paginationOptions="paginationOptions"
    :sort-options="sortOptions"
    :isLoading.sync="isTableLoading"
    :rows="rows"
    :columns="columns"
    :lineNumbers="true"
    mode="remote"
    :totalRows="totalRecords"
    @on-row-click="onRowClick"
    @on-page-change="onPageChange"
    @on-sort-change="onSortChange"
    @on-column-filter="onColumnFilter"
    @on-per-page-change="onPerPageChange"
    @on-search="onSearch"
    :search-options="{
        enabled: true
      }"
    styleClass="vgt-table striped bordered"
    ref="table"
  >

Fairly standard vgt set up.

  columns: [
    {
      label: 'some column',
      field: 'column1'
    },
    {
      label: 'Customer',
      field: 'customerName',
      filterOptions: {
        enabled: true,
        placeholder: 'All',
        filterDropdownItems: Object.values(this.customers)
      }
    },
    {
      label: 'other columns',
      field: 'column234'
    }
]

and the API call

methods: {
   async load () {
      await this.getTableOptions()
    },

  async getTableOptions () {
  try {
    var response = await axios.get(APICallUrl)

    this.customers= []
    for (var i = 0; i < response.data.customers.length; i++) {
      this.customers.push({ value: response.data.customers[i].customerId, text: response.data.customers[i].customerName})
    }
  } catch (e) {
    console.log('e', e)
  }
}

The only thing that I thought of is that the table has finished rendering before the load method is complete. However just creating a static object in my data and assigning it to a filterDropDownItems yielded no better results. The result whenever I try to set it to an object is that the box is a type-in box rather than a dropdown.

Answer 1

You can make the table update after it's rendered by making columns a computed property. The other problem you have is this.customers is an Array but Object.values() expects an Object. You could use the Array.map function instead

this.customers.map(c => c.value)

Although according to the VueGoodTable docs an array of objects like you have should work just fine

computed: {
  columns() {
    return [
      {
        label: 'some column',
        field: 'column1'
      },
      {
        label: 'Customer',
        field: 'customerName',
        filterOptions: {
          enabled: true,
          placeholder: 'All',
          filterDropdownItems: this.customers
        }
      },
      {
        label: 'other columns',
        field: 'column234'
      }
    ];
  }
}