0

I'm using buefy to create a table with input filters in columns. This is what it looks like:

<b-table
        :data="cars"
        :sticky-header="true"
        :selected.sync="selected"
        >
          <template slot-scope="props">
            <template v-for="column in columns">
              <b-table-column :key="column.id" v-bind="column">
                <template
                  v-if="column.searchable"
                  slot="searchable"
                  slot-scope="props"
                >
                  <b-input
                    v-model="props.filters[props.column.field]"
                    placeholder="Search..."
                    icon="magnify"
                    size="is-small"
                  />
                </template>
                {{ props.row[column.field] }}
              </b-table-column>
            </template>
          </template>
        </b-table>
...
...
data () {
    return {
      selected: null,
      columns: [
        {
          field: 'constructor',
          label: 'Constructor',
          searchable: true
        },
        ....
      ]
    }

I would like to be able to clear the searched fields. Any suggestions to achieve this please?

MLavoie
  • 9,671
  • 41
  • 36
  • 56
Elyoleo
  • 1
  • 2

1 Answers1

1

Your b-input is bound to props.filters[props.column.field], so it means that you should be able to add an icon to reset this value:

<b-input
  v-model="props.filters[props.column.field]"
  ...
  icon-right="close-circle"
  icon-right-clickable
  @icon-right-click="props.filters[props.column.field] = ''"
>

Please let me know if that works.

Gaetan C.
  • 1,742
  • 13
  • 21