Using a VueJS prop as a variable for array map

Question

I'm trying to work out how I can use a variable (prop) as part of an array map function.

Basically I have this code:

var result = this.$store.getters['example/store'].map(a => a.fixed_column)

and I want fixed_column to be able to be a variable, allowing me to reuse this component in lots of places depending what column name is passed in as a prop.

I tried

.map(a => a.{this.category})

and other various syntax variations of that - but couldnt get it to work.

What I want to be able to do is something like this:

<my-component category="example_column"></my-component>

and have the array sum up example_column

This is my full vue component if needed:

<template>
    <div>
        <p>Pending count: {{ pending }}</p>
    </div>
</template>

<script>
     export default {
         props: {
             category: {},
         }, 
         computed: {
             pending() {
                 var result = this.$store.getters['example/store'].map(a => a.fixed_column);
                 return result.reduce((a, b) => a + b, 0);
             }
         },
     }
</script>

@aBiscuit - I added some info to the question. Basically category would be a string I can set on the component to allow me to reuse it. — Laurence
– Laurence, Commented Oct 26, 2018 at 0:57

aBiscuit · Accepted Answer · 2018-10-26 01:00:47Z

1

Correct way to access object property dynamically would be via brackets notation. But for that to work, you have to make sure that category prop can be accessed inside the component. For that, valid prop declaration is required.

Here are essential parts for it to work:

props: {
  category: {
    type: String,
    default: 'default_category',
  }
},
computed: {
  pending() {
    const result = this.$store.getters['example/store'].map(a => a[this.category]);
    return result.reduce((a, b) => a + b, 0);
  }
},

answered Oct 26, 2018 at 1:00

aBiscuit

4,7621 gold badge21 silver badges30 bronze badges

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

Comments

Boussadjra Brahim · Accepted Answer · 2018-10-26 01:00:29Z

1

You could simply do it as follow :

 var result = this.$store.getters['example/store'].map(a => a[this.category]);

and category should be a string

answered Oct 26, 2018 at 1:00

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Using a VueJS prop as a variable for array map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related