Использование реквизита VueJS в качестве переменной для карты массива

Question

Я пытаюсь понять, как я могу использовать переменную (prop) как часть функции карты массива.

В основном у меня есть этот код:

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

и яхочу, чтобы fixed_column мог быть переменной, что позволяет мне многократно использовать этот компонент в зависимости от того, какое имя столбца передается как пропеллер.

Я пытался

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

и другие различные синтаксические вариации этого - но не могли заставить его работать.

То, что я хочу сделать, это что-то вроде этого:

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

и суммирование массива example_column

Это мой полный компонент Vue, если необходимо:

<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>

Answer 1

Правильный способ динамического доступа к свойству объекта будет через обозначение в скобках .Но чтобы это работало, вы должны убедиться, что category prop доступен внутри компонента.Для этого требуется действительное объявление о проп.

Вот основные элементы, необходимые для его работы:

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);
  }
},

Answer 2

Вы можете просто сделать это следующим образом:

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

и category должно быть строкой