[Vuejs]-Vue.js matching data value in table based on the row value or html id

by

0👍

✅

You first need to grab the dates from the first row in a way that makes sense to your app (I don’t know if that data is rendered by a BE, if it’s hardcoded or where it comes from).

let dates = ['03-2019','02-2019','01-2019','12-2018','04-2017'];

These dates will be used as the keys to find their corresponding values.

Now iterate through those dates and grab their corresponding values in the data set:

let dynamicData = dates.map( date => this.dataSet[date] )
  return dynamicDates;
}

Finally, in your v-for do the same you’re doing but use the new dynamicData variable instead

tr.dynamicData
  td(v-for="data in dataSet") {{data}}

Here’s a pen I did with this to test.

Depending on how you can get the data of the first row, you could use dynaicData as a computed variable. It will be the same except that the code will be a little bit cleaner.

Good luck

Leave a comment