Cannot refresh vue bootstrap table when emitting data from child to parent

Question

I am using vue-bootstrap https://bootstrap-vue.js.org/docs/components/table/ and have implemented a slot for the header so I can have a show and hide button in each column header that contains a search box. The header is in a slot. In the fields data I have added a showFilter property that is boolean. So the idea was that it toggled between true and false. Now this all works when in the child you emit the data change to the parent it updates. However the table itself does not update until you trigger another action like try and sort a header, then it updates. I have tried the Force refreshing of table data mentioned in the above url but that does not seem to work, or I can't figure out how to use it as there is not an example.

Parent

<template>
<b-table
      ref="table"
      :items="filtered"
      :fields="fields"
      sort-icon-left
      responsive="sm"
    >
      <template v-slot:head()="data">
        <TableHeader :data="data" :filters="filters" />
      </template>
    </b-table>
</template>

data() {
  return {
      fields: [
        {
          key: "name",
          sortable: true,
          showFilters: true,
        },
        { key: "age", sortable: true, showFilters: true },
      ],
    }
}

Child

<template>
  <div>
    <div class="text-info">{{ data.label.toUpperCase() }}</div>
    <div>
      <button @click="setUpdate(data.field)">filters</button>
    </div>
    <input
      v-show="data.field.showFilters"
      v-model="filters[data.field.key]"
      :placeholder="data.label"
      @keyup="$emit('update:filters[data.field.key]')"
    />
  </div>
</template>

  methods: {
    setUpdate(field) {
      this._originalField = Object.assign({}, field);
      field.showFilters = !field.showFilters;
      this.$root.$emit("update:field.showFilters", "bv::refresh::table");
      console.log(field.showFilters);
    }
  }

Can you include all the component functions/data? Where is the filters object? — Zim

karl karl · Accepted Answer · 2019-11-21T12:38:29

I solved this by using a bootstrap collapse button and dealing with it all in the child which makes more sense I think!

   <b-collapse :id="'collapse' + data.field.key">
      <b-card>
        <!-- content -->
      </b-card>
    </b-collapse>

Cannot refresh vue bootstrap table when emitting data from child to parent

1 Answers