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

您只需按照以下步骤操作即可：

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

和category应该是字符串

Answer 2

正确地动态访问对象属性的方法是通过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);
  }
},

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

2 个答案: