[Vuejs]-How to take a table data updated using Vue.js

by

1👍

✅

To make a value or object reactive in Vue it needs to be initialised properly, generally this is either as a prop, a data property or a computed value.

Vue is not seeing changes to your db variable because it hasn’t been initialised as one of these.

For an array of table data you can initialise it like this:

data () {
    return {
      items : [
   ['23/03/2020', 2309.99, 2332.25],
   ['24/03/2020', 2343,30, 2424.62],
   ['25/03/2020', 2424.62, 2519.56]
     ],
    }
  },

To edit the data for display in the template we can use a computed property which will update any time this.items changes:

computed: {
   tableData () {
       return this.items.map(x=>{
         x.push((x[2]-x[1]).toFixed(2)) //adds difference column
         return x
       })
   },
  }

Now we can make edits to items with a method and it everything will update:

methods: {
    addRow () {
      lastRow = this.items.slice(-1)[0]
        this.items.push(
          [lastRow[0] ,lastRow[2], lastRow[2] + 10]
        )
    }
  },

here is a working example for the table: https://jsfiddle.net/ellisdod/fjqsbtv1/

for the chart refer to my previous answer

👤ellisdod

Leave a comment