问题描述
使用b-table时，我遇到最新版本的buefy（0.9.2）的问题，因此基本上每当我的页面加载时，我都会收到错误消息说无法读取undefined的有效日期（即，props.row是未定义的）请注意，在我使用的buefy（0.8.17）的早期版本中没有发生此问题。
我的页面（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
:key="componentKey"
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 -->
<template slot-scope="props">
<b-table-column field="effectiveDate" label="Eff Date">{{ props.row.effectiveDate }}</b-table-column>
<b-table-column field="accountType" label="Account Type">{{ props.row.accountType }}</b-table-column>
<b-table-column>
<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>
<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','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','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','bankName',newValue)}"
></b-input>
</b-field>
<b-field label="Branch Name">
<b-input
:value="props.row.branchName"
@input="(newValue)=>{updateRowValue('records','branchName',newValue)}"
></b-input>
</b-field>
<b-field label="Bank Account Number">
<b-input
:value="props.row.bankAccountNumber"
@input="(newValue)=>{updateRowValue('records','bankAccountNumber',newValue)}"
></b-input>
</b-field>
<b-field label="IFSC">
<b-input
:value="props.row.ifsc"
@input="(newValue)=>{updateRowValue('records','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>
因此，每当他页面加载时，我都会收到一条错误消息，提示无法读取该行的undefined的有效日期- field =“ effectiveDate” label =“ Eff Date”> {{props.row.effectiveDate}}。 请帮忙。
我的package.json-
{
"name": "page-core","version": "0.1.0","private": true,"scripts": {
"serve": "vue-cli-service serve --port 80","build": "vue-cli-service build","lint": "vue-cli-service lint"
},"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.24","@fortawesome/free-solid-svg-icons": "^5.11.1","@fortawesome/vue-fontawesome": "^0.1.7","axios": "^0.20.0","buefy": "^0.8.17","connect-history-api-fallback": "^1.6.0","core-js": "^2.6.5","cors": "^2.8.5","debounce": "^1.2.0","lodash": "^4.17.15","lodash.debounce": "^4.0.8","mxgraph": "^4.2.0","socket.io": "^2.3.0","vue": "^2.6.11","vue-google-charts": "^0.3.2","vue-json-editor": "^1.4.2","vue-material-design-icons": "^4.2.0","vue-router": "^3.4.3","vue2-editor": "^2.10.2","vuex": "^3.5.1","vuex-persistedstate": "^3.1.0","xml2js": "^0.4.22"
},"devDependencies": {
"@vue/cli-plugin-babel": "^3.10.0","@vue/cli-plugin-eslint": "^3.10.0","@vue/cli-service": "^3.10.0","@vue/eslint-config-standard": "^4.0.0","babel-eslint": "^10.0.1","eslint": "^5.16.0","eslint-plugin-vue": "^5.0.0","node-sass": "^4.9.0","sass-loader": "^7.1.0","vue-template-compiler": "^2.6.11"
},"eslintConfig": {
"root": true,"env": {
"node": true
},"extends": [
"plugin:vue/essential","@vue/standard"
],"rules": {},"parserOptions": {
"parser": "babel-eslint"
}
},"postcss": {
"plugins": {
"autoprefixer": {}
}
},"browserslist": [
"> 1%","last 2 versions"
]
}
解决方法
似乎我们必须这样做：
<b-table-column numeric v-slot="props">{{ props.row.id }}</b-table-column>
代替：
<template slot-scope="props">
<b-table-column label="#" sortable>{{ props.row.id }}</b-table-column>
</template>
如果我发现其他问题，我将更新答案。
更新：所以这不是一个错误，它是一个新语法。 “插槽插入每个表列”。
https://github.com/buefy/buefy/issues/2772#issuecomment-675874750
,https://github.com/buefy/buefy/releases/tag/v0.9.0
版本9中的重大更改影响了插槽的使用方式：
来自
<b-table :data="myData">
<template slot-scope="props">
<b-table-column field="name" label="Name">
{{ props.row.name }}
</b-table-column>
<b-table-column field="age" numeric label="Age">
{{ props.row.age }}
</b-table-column>
</template>
</b-table>
收件人
<b-table :data="myData">
<b-table-column field="name" label="Name" v-slot="props">
{{ props.row.name }}
</b-table-column>
<b-table-column field="age" label="Age">
<template v-slot:default="props">
{{ props.row.age }}
</template>
</b-table-column>
</b-table>
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...