我如何 "dynamically" 将 veux getter 作为 prop 传递给我的子组件？

Question

我正在尝试将一个数组动态传递到我的组件的道具中。问题是这个数组是由 getter 获取的。原因是我从商店中获取了多个列表，并想使用循环将它们传递下去。

Parent.vue（见第 2 行）

<v-tab-item v-for="item in tabItems" :key="item.list">
  <searchCard :items="item.list">
    <template v-slot:content="prop">
      <v-card-title class="text-capitalize">{{ prop.item.name }}</v-card-title>
      <v-card-text>
        <p>Rate:&nbsp;{{ prop.item.rate }}/{{ prop.item.unit }}</p>
        <p>Quantity:&nbsp;{{ prop.item.quantity }}</p>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <plusMinusGroup>
          <p slot="value">{{ prop.item.quantity || 0 }}</p>
        </plusMinusGroup>
      </v-card-actions>
    </template>
  </searchCard>
</v-tab-item>

这就是我的 tabItems 数组和映射的 getters

的样子

tabItems: [
  { list: 'prodList', cardHeight: 20 },
  { list: 'materialList', cardHeight: 20 },
  { list: 'itemList', cardHeight: 20 },
],

...mapGetters({
  prodList: 'products/productList',
  materialList: 'materials/materialList',
  itemList: 'items/itemList',
}),

问题是该值被截获为字符串文字（这是有道理的），我无法让它工作。

我试过用 { list: this.prodList, cardHeight: 20 }, 替换 { list: "prodList", cardHeight: 20 }, 但这没有帮助。

此外，由于我的 Vuex 被拆分成多个模块，我无法使用提供的字符串来获取子模块中的 getter。

Answer 1

这里的主要困难是没有 $computed 等同于 $data。如果有这个就好了。

一种选择是在模板中明确 this：

<searchCard :items="this[item.list]">

如果你是运行 linter，它可能会抱怨。

该实例确实在 _self 属性中引用了自身。下划线表示它是私有的，所以我们真的不应该使用它。理论上你可以创建自己的别名：

data () {
  return {
    self: this
  }
}

然后：

<searchCard :items="self[item.list]">

虽然看起来有点老套。

有一些使用属性 getter 的技巧可行，但我认为这只会使事情复杂化。例如在代理到相关列表的每个选项卡项上放置 getter。

最简单的方法可能是提供一个方法：

methods: {
  getList (listName) {
    return this[listName]
  }
}

与：

<searchCard :items="getList(item.list)">

对我来说，这似乎最不可能对代码的未来维护者造成混淆。

我如何 "dynamically" 将 veux getter 作为 prop 传递给我的子组件？

How can I "dynamically" pass a veux getter as a prop to my child component?

vue.js

vuex

getter

vue-props