时间戳

首页 > 解决方案 > 如何“动态地”将 veux getter 作为道具传递给我的子组件？

vue.js - 如何“动态地”将 veux getter 作为道具传递给我的子组件？

问题描述

我正在尝试将数组动态传递到我的组件的道具中。问题是这个数组是由 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数组和映射的 getter 的样子

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

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

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

我尝试过替换{ list: "prodList", cardHeight: 20 },，{ list: this.prodList, cardHeight: 20 },但这无济于事。

另外，因为我的 Vuex 被拆分成多个模块，所以我不能使用提供的字符串来获取子模块内的 getter。

标签： vue.jsvuexgettervue-props

解决方案

这里的主要困难是没有$computed等价于$data. 如果有这将很容易。

一种选择是this在模板中添加一个显式：

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

如果你正在运行一个 linter，它可能会抱怨这一点。

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

data () {
  return {
    self: this
  }
}

然后：

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

不过似乎有点hacky。

有一些使用属性获取器的技巧会起作用，但我认为这只会使事情复杂化。例如，在代理到相关列表的每个选项卡项上放置一个吸气剂。

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

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

和：

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

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

推荐阅读