Week - code helper

xxxxxxxxxx
 
<template>
  <mdb-container>
    <mdb-datatable-2
      v-model="data"
      striped
      bordered
      arrows
      :display="3"
    />
  </mdb-container>
</template>

xxxxxxxxxx
 
<style>
h3 {
  font-weight: normal;
  padding-top: 20px;
  padding-bottom: 30px;
}
p {
  color: #969696;
  margin-bottom: 0;
  font-size: 14px;
}
</style>

xxxxxxxxxx
 
<script>
  import { mdbDatatable2, mdbContainer } from 'mdbvue';
  export default {
    components: {
      mdbDatatable2,
      mdbContainer
    },
    data() {
      return {
        columns: [],
        rows: []
      };
    },
    computed: {
      data() {
        return {
          columns: this.columns,
          rows: this.rows
        };
      },
    },
    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;
      }
    },
    mounted(){
      fetch('https://jsonplaceholder.typicode.com/todos')
        .then(res => res.json())
        .then(json => {
          let keys = ["id", "title", "completed"];
          let entries = this.filterData(json, keys);
          //columns
          this.columns = keys.map(key => {
            return {
              label: key.toUpperCase(),
              field: key,
              sort: true
            };
          });
          //rows
          entries.map(entry => this.rows.push(entry));
        })
        .catch(err => console.log(err));
    }
  };
</script>

Console errors: 0