javascript - 使用 VueJS prop 作为数组映射的变量

Question

我正在尝试弄清楚如何使用变量(prop)作为数组映射函数的一部分。

基本上我有这个代码:

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

并且我希望 fixed_column 能够成为一个变量，这样我就可以在很多地方重用这个组件，具体取决于作为 prop 传入的列名称。

我试过了

.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

动态访问对象属性的正确方法是通过 brackets notation 。但要使其发挥作用，您必须确保可以在组件内部访问 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);
  }
},