我如何 "dynamically" 将 veux getter 作为 prop 传递给我的子组件?
How can I "dynamically" pass a veux getter as a prop to my child component?
我正在尝试将一个数组动态传递到我的组件的道具中。问题是这个数组是由 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: {{ prop.item.rate }}/{{ prop.item.unit }}</p>
<p>Quantity: {{ 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。
这里的主要困难是没有 $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)">
对我来说,这似乎最不可能对代码的未来维护者造成混淆。
我正在尝试将一个数组动态传递到我的组件的道具中。问题是这个数组是由 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: {{ prop.item.rate }}/{{ prop.item.unit }}</p>
<p>Quantity: {{ 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。
这里的主要困难是没有 $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)">
对我来说,这似乎最不可能对代码的未来维护者造成混淆。