VueJS MDB-datatable 不呈现来自 API 调用的数据
Posted
技术标签:
【中文标题】VueJS MDB-datatable 不呈现来自 API 调用的数据【英文标题】:VueJS MDB-datatable doesn't render data from the API call 【发布时间】:2019-10-14 06:52:19 【问题描述】:我正在使用 vueJs MDB-datatable 来显示来自我的 API 的数据。 我按照 MDB-datable 文档处理“OtherJSON 结构”,但它没有重新渲染 API 请求中的数据。
我尝试了不同的回调 beforeCreate、created、beforeMount 和mounted,数据被改变了,但仍然没有呈现最新的数据。
代码如下:
<template>
<mdb-datatable
:data="tableData"
striped
bordered
/>
</template>
<script>
import 'mdbvue/build/css/mdb.css';
import mdbDatatable from 'mdbvue';
export default
components:
mdbDatatable
,
data: () => (
tableData:
columns: [],
rows: []
),
created()
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(json =>
let keys = ["id", "name", "username"];
let entries = this.filterData(json, keys);
//columns
this.tableData.columns = keys.map(key =>
return
label: key.toUpperCase(),
field: key,
sort: 'asc'
;
);
console.log(this.tableData.columns);
//rows
entries.map(entry => this.tableData.rows.push(entry));
console.log(this.tableData.rows);
)
.catch(err => console.log(err))
,
methods:
filterData(dataArr, keys)
let data = dataArr.map(entry =>
let filteredEntry = ;
keys.forEach(key =>
if(key in entry)
filteredEntry[key] = entry[key];
)
return filteredEntry;
)
return data;
</script>
MDB 数据表文档似乎很简单,但我不知道我缺少哪一部分。
我是 VueJS 的新手。非常感谢任何帮助。
【问题讨论】:
【参考方案1】:当前版本的 MDB Vue (5.5.0) 似乎引用了 rows
和 columns
数组,并在这些数组发生变异时做出反应,而不是对绑定到 data
的属性的更改做出反应道具本身。
我看到你已经在改变而不是替换 rows
数组,所以你需要对 columns
数组做同样的事情。
//columns
this.tableData.columns.push(...keys.map(key =>
return
label: key.toUpperCase(),
field: key,
sort: 'asc'
;
));
【讨论】:
以上是关于VueJS MDB-datatable 不呈现来自 API 调用的数据的主要内容,如果未能解决你的问题,请参考以下文章
使用带有 vuejs 指令的 select2,来自 html 的数据