将数据从 API 加载到 mdbootstrap 数据表（vue.js、axios）答案

【问题标题】：Load data from API into mdbootstrap datatable (vue.js, axios)将数据从 API 加载到 mdbootstrap 数据表（vue.js、axios）
【发布时间】：2020-10-12 09:18:24
【问题描述】：

我想将数据从我的 API 加载到 mdbootstrap 数据表中。

如何编写一个调用 getPosts() API 并将结果写入 rows[] 数组的方法？

<template>
   <mdb-datatable
      :data="data"
      striped
      bordered      
      >
</template>
<script>
   import { mdbDatatable } from 'mdbvue'
   import api from '@/api'
   export default {
     name: 'TPanels',
     components: {
       mdbDatatable },
     data: function () {
       return {
         loading: false,
         posts: [],
         model: {},
         claims: '',
         data: {
           columns: [{
             label: 'ID',
             field: 'immo_id',
             sort: 'asc'
           },
           {
             label: 'Titel',
             field: 'title',
             sort: 'asc'
           },
           {
             label: 'Preis',
             field: 'price',
             sort: 'asc'
           }],
           rows: [{
      immo_id: XXX,
      title: YYY,
      price: ZZZ,
   }],
         }
       }
     },
     async created () {
       this.refreshPosts()
       this.setup()
     },
     methods: {
       async setup () {
         this.claims = await this.$auth.getUser()
       },
       async isAuthenticated () {
         this.authenticated = await this.$auth.isAuthenticated()
       },
       async refreshPosts () {
         this.loading = true
         this.posts = await api.getPosts()
     }
   }
</script>

在我的模板 (vue.js) 中，我可以通过以下方式访问 API：

<tr v-for="post in posts" :key="post.id">
  <td>{{ post.immo_id }}</td>
  <td>{{ post.title }}</td>
  <td>{{ post.url }}</td>
  <td>{{ post.user_id }}</td>
</tr>

所以我知道 API 正在运行。请问我该怎么做？

【问题讨论】：

标签： vue.js axios mdbootstrap

【解决方案1】：

我设法通过编写 getTableData() 方法解决了这个问题。重要的是在数组上使用 push() 以便让 vue 重新渲染 html。

},
async created () {
  this.refreshPosts()
  this.setup()
  await this.getTableData()
},

},
  getTableData () {
    return api.getPosts().then(response => {
      var index
      let temp = response
      console.log(temp)
      for (index = 0; index < temp.length; ++index) {
        this.data.rows.push({
          title: temp[index].title,
          immo_id: temp[index].immo_id,
          price: temp[index].price
        })
      }
    }
    )
  }

【讨论】：