Vuejs Render list of Array based on key values

Question

I have a dataArray with data like this:

dataArray: {'stat1': 'stat1stat', 'stat2': 'stat2stat', 'stat3': 'stat3stat'}

and so on with hundreds of statistics in the array.

I have been outputting things hard coded in the vue template like this:

{{dataArray.stat2}} {{dataArray.stat3}} ..etc

What I would like to do is have a new array that specifies the keys I want to render. So something like this:

dataToShow: ['stat2', 'stat3']

And then somehow I could do a loop or v-for to only show the data that is in dataToShow

I've tried a few different ways and I can't get it to work. I think it needs to be a computed property but it isn't working.

Can anyone give some advice on how to implement this?

skirtle · Accepted Answer · 2019-09-15 16:39:35Z

1

Wouldn't it just be this?

<template v-for="property in dataToShow">
  {{ dataArray[property] }}
</template>

Plus any relevant markup for each entry.

dataToShow could be a computed property as you've suggested but it could just as easily be in your data:

data () {
  return {
    dataArray: {
      stat1: 'stat1stat',
      // etc.
    },

    dataToShow: ['stat2', 'stat3']
  }
}

answered Sep 15, 2019 at 16:36

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wow that is so simple. it works perfectly. i was trying to make it too complicated