Home » vue » How to output a list to vuetify data-table?

How to output a list to vuetify data-table?

Posted by: admin November 26, 2021 Leave a comment

Questions:

Using vue.js, vuetify data-table, axios and express, I have build a table according to the official vuetify data-table example. With axios I request the data and everything works fine, the express server generates a list, which has a few recurring values:

[
    "id1", "01-01-2019", "name1", "€ 5,60",
    "id2", "02-01-2019", "name2", "€ 5,70",
    "id3", "03-01-2019", "name3", "€ 5,20",
    ...
]

Now I have two questions:

  1. How to put the data into the table?
  2. Is a list suitable for this operation or should I better generate a json object? If a list is not suitable, what is the best way to display the json object to the data-table?

Thank you in advance

Answers:

It would be best to have your data in JSON. This is a basic way of doing it:

new Vue({
  el: '#app',
  data () {
    return {
      headers: [
        { text: 'ID' },
        { text: 'Date' },
        { text: 'Name' },
        { text: 'Price' }
      ],
      listItems: null
    }
  },
  mounted () {
    axios
      .get('data.json')
      .then(response => (this.listItems = response.data))
  }
})

So you have your headers already in the data, then when your app is mounted axios loads the JSON data and passes it to the listItems. Then your vuetify will be like this:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="listItems"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-right">{{ props.item.id }}</td>
        <td class="text-xs-right">{{ props.item.date }}</td>
        <td class="text-xs-right">{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.price }}</td>
      </template>
    </v-data-table>
  </v-app>
</div>

###

Use a computed property to paginate your listItems which give something like

[
    ["id1", "01-01-2019", "name1", "€ 5,60"],
    ["id2", "02-01-2019", "name2", "€ 5,70"],
    ["id3", "03-01-2019", "name3", "€ 5,20"],
    ...
]

then convert each inner array to an object by adding the appropriate keys :

[
  {
    "id": "id1",
    "date": "01-01-2019",
    "name": "name1",
    "amount": "€ 5,60"
  },
  {
    "id": "id2",
    "date": "02-01-2019",
    "name": "name2",
    "amount": "€ 5,70"
  },
  {
    "id": "id3",
    "date": "03-01-2019",
    "name": "name3",
    "amount": "€ 5,20"
  }
]

Running example

new Vue({
  el: '#app',
  data() {
    return {
      headers: [{
          text: 'ID',
          value: 'id'
        },
        {
          text: 'Date',
          value: 'data'
        },
        {
          text: 'Name',
          value: 'name'
        },
        {
          text: 'Amount',
          value: 'amount'
        }
      ],
      listItems: [
        "id1", "01-01-2019", "name1", "€ 5,60",
        "id2", "02-01-2019", "name2", "€ 5,70",
        "id3", "03-01-2019", "name3", "€ 5,20"

      ]
    }
  },
  computed: {
    items() {
      let items = [];
      let j = 0;
      for (let i = 0; i < this.listItems.length; i = i + 4) {
        items[j] = this.listItems.slice(i, i + 4);
        j++;
      }
      let tmp = items.map((item, i) => {
        let ob = {};
        item.forEach((t, k) => {

          k % 4 == 0 ? ob.id = t : {};
          k % 4 == 1 ? ob.date = t : {};
          k % 4 == 2 ? ob.name = t : {};
          k % 4 == 3 ? ob.amount = t : {};

        })
        return ob;
      });
   
      return tmp;


    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<div id="app" data-app>
  <v-data-table :headers="headers" :items="items" class="elevation-1">
    <template slot="items" slot-scope="props">
        <td class="text-xs-right">{{ props.item.id }}</td>
        <td class="text-xs-right">{{ props.item.date }}</td>
        <td class="text-xs-right">{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.amount }}</td>
      </template>
  </v-data-table>

</div>