Vue.js 使用最新buefy版本0.9.2在b表中出现问题?
在使用b-table时,我面临最新版本的buefy(0.9.2)的问题。因此,基本上每当我的页面加载时,我都会收到错误消息,说无法读取未定义的生效日期。(即,props.row未定义)。请注意,我使用的前一版本的buefy(0.8.17)中没有出现此问题 我的页面(vue文件)-Vue.js 使用最新buefy版本0.9.2在b表中出现问题?,vue.js,buefy,Vue.js,Buefy,在使用b-table时,我面临最新版本的buefy(0.9.2)的问题。因此,基本上每当我的页面加载时,我都会收到错误消息,说无法读取未定义的生效日期。(即,props.row未定义)。请注意,我使用的前一版本的buefy(0.8.17)中没有出现此问题 我的页面(vue文件)- 似乎我们必须这样做: {{props.row.id} 而不是: {{props.row.id} 如果我发现其他问题,我会更新答案 更新:所以这不是一个错误,这是一个新的语法。“插槽位于每个表列中” 第9版中出现
似乎我们必须这样做:
{{props.row.id}
而不是:
{{props.row.id}
如果我发现其他问题,我会更新答案
更新:所以这不是一个错误,这是一个新的语法。“插槽位于每个表列中”
第9版中出现了影响插槽使用方式的突破性更改:
从
{{props.row.name}
{{props.row.age}
到
{{props.row.name}
{{props.row.age}
我们是否只需要为b柱添加v形槽?来自的零件如何?
<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', 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>
{
"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 :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>