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) 似乎引用了 rowscolumns 数组,并在这些数组发生变异时做出反应,而不是对绑定到 data 的属性的更改做出反应道具本身。

我看到你已经在改变而不是替换 rows 数组,所以你需要对 columns 数组做同样的事情。

    //columns
    this.tableData.columns.push(...keys.map(key => 
      return 
        label: key.toUpperCase(),
        field: key,
        sort: 'asc'
      ;
    ));

【讨论】:

以上是关于VueJS MDB-datatable 不呈现来自 API 调用的数据的主要内容,如果未能解决你的问题,请参考以下文章

VueJS 不呈现模板内容

VueJS组件不呈现

使用带有 vuejs 指令的 select2,来自 html 的数据

VueJS模板未呈现

Vue.js学习系列--如何在sublime是vuejs代码呈现高亮状态

使用 VueJS 处理后端配置对象