[Vuejs]-How to create a dynamic table with vue js

0đź‘Ť

Preprocess your json in a computed property.

In your example you just need to add the “user” properties to the first “application” item.

new Vue({
  el: '#app',
  data() {
    return {
      columns: {
        username: 'Name',
        customer: 'Customer',
        language: 'Language',
        app_id: 'App_ID'
      },
      userData: {
        "user": {
          "_id": "5a500vlflg0aslf011ld0a25a5",
          "username": "john",
          "id": "59d25992988fsaj19fe31d7",
          "name": "Test",
          "customer": " John Carew",
        },
        "application": [{
            "app_id": "5af56pi314-y1i96kdnqs871nih35",
            "language": "es"
          },
          {
            "app_id": "5af56pi314-blvinpgn4c95ywyt8j",
            "language": "en"
          }
        ]
      }
    }
  },
  computed: {
    tableData() {
      return this.userData.application.map((x, index) => {
        return index === 0 ? Object.assign(x, this.userData.user) : x
      })
    }
  }
})

Here is a working example: https://jsfiddle.net/ellisdod/jm3snwxc/2/

Leave a comment