【发布时间】：2020-09-15 12:23:52
【问题描述】：
我目前正在将 Vue js 框架与 buefy (0.9.2) 一起用于 UI 组件。这里的问题是当我单击删除图标（从表中删除该行）或单击添加新行按钮时，b-table 组件有时不会更新。我可以确认操作（删除和添加行）本身工作正常。我的意思是我控制台记录了数据数组，我可以看到对象数组已更新。问题是前端屏幕或 b-table 组件没有立即更新或重新渲染。然而，这个问题并不一致。 （有时有效，有时无效）。
注意：如果我返回上一页并进行硬刷新（ctrl+f5），然后再次返回同一页面，则问题不再存在，这让我认为这是一些问题页面有时不更新的与缓存相关的问题。
我该如何解决这个不一致的问题？
我还尝试将 :key="componentKey" 之类的键道具添加到 b 表，然后在单击删除或添加按钮时将键递增 1。但是这个解决方案不是一个合适的解决方案，因为它有自己的一系列问题。例如，我正在对我的表使用分页，如果我单击第 3 页上的删除或添加按钮，那么由于我通过增加键来手动刷新表，表将恢复到第 1 页。
我的vue页面-
<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>
我不确定这是 buefy 的 b-table 组件的问题，还是与 vue js 有关。请帮忙？
【问题讨论】：