I am currently using the Vue js framework along with buefy (0.9.2) for the UI components. The issue here is that the b-table component is not updating sometimes when I click the delete icon(deletes that row from the table) or when I click the add new row button. I can confirm that the operations(delete and add row) themselves are working perfectly. I mean I console logged the data array and I can see that the array of objects is updated. The issue is that the front-end screen or b-table component is not immediately updating or re-rendering. This issue is however not consistent though. (sometime's it works and sometimes it doesn't).
NOTE: If I go back to the previous page and do a hard refresh(ctrl+f5) and then return back to the same page again then the issue is not there anymore which makes me think that this is some kind of cache-related issue where the page is not updating sometimes.
How can I solve this inconsistent issue?
I have also tried adding a key prop like :key="componentKey" to the b-table and then incrementing the key by 1, whenever the delete or add button is clicked. But this solution is not a proper one as it comes with its own set of problems. For example, I am using pagination with my table and let say if I click the delete or add button on the 3rd page then since I am manually refreshing the table by incrementing the key the table will restore back to the 1st page.
My vue page-
<template>
<div class="container is-fluid">
<b-loading :is-full-page="true" :active.sync="this.isLoading"></b-loading>
<p class="subtitle">Bank Account Detail</p>
<b-field label="ID">
<b-input
:disabled="true"
:value="this.objectData.id"
></b-input>
</b-field>
<b-button @click="addTableRow('records', 'records')" class="is-radiusless">Add Bank Record</b-button>
<!-- Begin Code Change:-Fixed delete row issue by refreshing table after adding key prop to the b-table-8-27-2020-vignesh -->
<b-table
ref="records"
:data="this.objectData.records"
:hoverable="true"
:paginated="true"
:per-page="10"
selectable
@select="selected"
detailed
:show-detail-icon="true"
icon-pack="mdi"
>
<!-- End Code Change:-Fixed delete row issue by refreshing table after adding key prop to the b-table-8-27-2020-vignesh -->
<b-table-column v-slot="props" field="effectiveDate" label="Eff Date">{{ props.row.effectiveDate }}</b-table-column>
<b-table-column v-slot="props" field="accountType" label="Account Type">{{ props.row.accountType }}</b-table-column>
<b-table-column v-slot="props">
<b-button class="is-borderless is-borderless" @click="deleteTableRow('records','records',props.index)">
<b-icon icon="delete"></b-icon>
</b-button>
</b-table-column>
<template slot="detail" slot-scope="props">
<div class="container is-fluid">
<b-field label="Effective Date">
<b-datepicker
:value="props.row.effectiveDate | toDate"
@input="(newValue)=>{updateRowValue('records', props.index, 'effectiveDate', newValue)}"
editable
></b-datepicker>
</b-field>
<b-field label="Account Type">
<b-input
:value="props.row.accountType"
@input="(newValue)=>{updateRowValue('records', props.index, 'accountType', newValue)}"
>
</b-input>
</b-field>
<b-field label="Country">
<b-autocomplete
:value="props.row.country"
:open-on-focus="true"
:keep-first="true"
:data="['India','United Kingdom','United States']"
@input="(newValue)=>{updateRowValue('records', props.index, 'country', newValue)}"
>
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
<b-field label="Bank Name">
<b-input
:value="props.row.bankName"
@input="(newValue)=>{updateRowValue('records', props.index, 'bankName', newValue)}"
></b-input>
</b-field>
<b-field label="Branch Name">
<b-input
:value="props.row.branchName"
@input="(newValue)=>{updateRowValue('records', props.index, 'branchName', newValue)}"
></b-input>
</b-field>
<b-field label="Bank Account Number">
<b-input
:value="props.row.bankAccountNumber"
@input="(newValue)=>{updateRowValue('records', props.index, 'bankAccountNumber', newValue)}"
></b-input>
</b-field>
<b-field label="IFSC">
<b-input
:value="props.row.ifsc"
@input="(newValue)=>{updateRowValue('records', props.index, 'ifsc', newValue)}"
></b-input>
</b-field>
</div>
</template>
</b-table>
<section>
<p class="is-size-7 has-text-danger">{{submitError}}</p>
<b-button @click="submitForm" class="is-radiusless">Submit</b-button>
<b-button type="is-text" @click="$router.go(-1)" class="is-radiusless">Return</b-button>
</section>
</div>
</template>
<script>
import { viewMixin } from "../viewMixin.js";
import debounce from "lodash/debounce";
import api from "../store/api";
const ViewName = "BankAccountDetails";
export default {
name: "BankAccountDetails",
mixins: [viewMixin(ViewName)],
data() {
return {
selected: null,
isFetching: false
};
},
computed: {
newRecord() {
return this.$route.params.id === null;
},
filteredCountryList() {
return this.listCountry.filter(option => {
return option
.toLowerCase()
.includes(this.objectData.countryOfBirth.toLowerCase());
});
}
},
mounted() {
var idCopy=this.$route.params.id
/* if incoming route has an ID, query for api object */
if (this.viewData.route_param) {
if (this.$route.params.id != null) {
var query = {
key: this.viewData.api_id,
path: this.viewData.api_path + this.$route.params.id,
overwriteData: false
};
this.$store.dispatch(this.viewData.mounted_action, query).then(data => {
this.objectData.id = this.$route.params.id;
if (data.length == 0) //if length of response is empty then set id to null in order to do a post on submit
{
this.$route.params.id=null;
}
}
).catch((err) => {
console.log(err)
})
}
} else {
var query = {
key: this.viewData.api_id,
path: this.viewData.api_path,
overwriteData: false
};
this.$store.dispatch(this.viewData.mounted_action, query);
this.objectData.id = this.$route.params.id;
}
//this.$store
this.objectData.id=idCopy
},
methods: {
deleteTableRow(tableRef, dataCol, index) {
this.objectData[dataCol].splice(index, 1);
},
writeLog(option) {
console.log(JSON.stringify(option));
},
},
components: {}
};
</script>
I am not really sure if this is an issue with buefy's b-table component or if it has sometime to do with the vue js. Please help?
