item-provider is called twice?

Describe the bug

The item provider for b-table is called twice.

Steps to reproduce the bug

This is the b-table:

                <b-table
                        :items="itemProvider"
                        :busy.sync="isBusy"
                        :fields="fields"
                        :sort-by.sync="sortBy"
                        :sort-desc.sync="sortDesc"
                        :striped="true"
                        :bordered="true"
                        :current-page="pagination.current_page"
                        :per-page="pagination.per_page"
                        class="card-table">

                    <template slot="status" slot-scope="data">
                        <b-badge variant="outline-success" v-if="data.item.status === 'active'">Active</b-badge>
                        <b-badge variant="outline-danger" v-if="data.item.status === 'inactive'">Inactive</b-badge>
                    </template>
                </b-table>

Method:

itemProvider () {
			this.isBusy = true;
                        //if I add console.log("Test"); here, it's displayed twice, too.
			let promise = axios.get ('/users/index?page=' + this.pagination.current_page);

			return promise.then (resp => {
				let items = resp.data.data;
				this.pagination.current_page = resp.data.current_page;
				this.pagination.last_page = resp.data.last_page;
				this.pagination.per_page = resp.data.per_page;
				this.pagination.total = resp.data.total;
				this.isBusy = false;

				return items
			}).catch (error => {
				this.isBusy = false;
				return [];
			})
		},

Expected behavior

Route is called only once.

Versions

Libraries:

• BootstrapVue: 2.0.0-rc.1
• Bootstrap: 4.3.1
• Vue: 2.6.6

Environment:

• Device: MacBook
• OS: macOS Mojave
• Browser: Safari
• Version: 12.1 (14607.1.40.1.4)

Additional context

I just found out that the double-call is removed if I remove :current-page="pagination.current_page" ?

[tmorehouse]

In your case, it is probably because you are setting the pagination parameters in the provider (in the then), which is triggering b-table to re-fetch the data, as the parameters (i.e. per page, current_page, etc) are being updated with values that might be different (i.e. a number as string vs a number)

[arthurshlain]

One solution, when you use props to rewrite default sortBy, sortDesc and other variables.

Use condition <b-table v-if="tableReady" ...> in template. Add tableReady: false to your data object. Add this.tableReady = true; after code that sets your props.