如何使用reduce将信息传递给基本组件? / 获取在 VueJS 中通过计算 props 传递的正确数据

Question

我目前正在开发一个库存应用程序，我正在尝试在我制作的基本卡组件上显示boxID和该框中的项目数量。

我创建的计算属性boxCards需要以这种格式吐出数据[{title: '', amount: null}]，因此可以将其推送到每个baseCard元素上。

目前，我的计算属性给了我标题，但我无法弄清楚如何获取每个盒子内的物品数量。

boxInLocation 返回此数组：["", "Box 1", "Box 4", "Box 4"]

这很好，但现在我需要计算每个框在该区域出现的次数，然后将其推送到reshapedItems函数的数量：点。

这只是我需要使用的简单归约方法吗？因为我只能在计算数组长度时实际生成一个数字。

此外，仅减少数组不会将数字吐出到每个单独的reshapedItem实例

关于我能在这里做什么的任何想法？

干杯！

App.Vue 数据：

data(){
userData: {
items: [
{
itemName: 'test book',
category: 'Books',
box: 'Box 3',
location: 'Kitchen',
},
{
itemName: 'test book 2',
category: 'Books',
box: 'Box 3',
location: 'Kitchen',
},
{
itemName: 'test book 3',
category: 'Books',
box: '',
location: 'Basement',
},
{
itemName: 'test record',
category: 'Records',
box: 'Box 1',
location: 'Basement',
},
{
itemName: 'test record 2',
category: 'Records',
box: 'Box 4',
location: 'Basement',
},
{
itemName: 'test furniture',
category: 'Furniture',
box: 'Box 2',
location: 'Garage',
},
{
itemName: 'test movie 1',
category: 'Movies',
box: 'Box 2',
location: 'Garage',
},
{
itemName: 'test movie 2',
category: 'Movies',
box: 'Box 2',
location: 'Garage',
},
{
itemName: 'test movie 3',
category: 'Movies',
box: 'Box 2',
location: 'Garage',
},
{
itemName: 'test Comicbook',
category: 'Movies',
box: 'Box 4',
location: 'Basement',
},
],
boxes: [
{ name: 'Box 1', location: 'Basement' },
{ name: 'Box 2', location: 'Garage' },
{ name: 'Box 3', location: 'Kitchen' },
{ name: 'Box 4', location: 'Basement' },
],
}

页面组件

data() {
return {
items: this.userData.items,
boxes: this.userData.boxes,
}
},
computed: {
boxCards() {
const filteredItems = this.items.filter((item) => item.location === 'Basement')
const itemsInBoxes = filteredItems.map((filteredItem) => {
return filteredItem.box
})
const filteredBoxes = this.boxes.filter((box) => box.location === 'Basement')
const reshapedBoxes = filteredBoxes.map((filteredBox) => {
return { boxID: `${filteredBox.name}`, amount: 100 }
})
return reshapedBoxes
},

Answer 1

您可以计算 this.items 数组中与相关框具有相同框名称的项目：

return this.boxes
.filter((box) => box.location === 'Basement')
.map((box) => ({
boxId: `${box.name}`,
amount: this.items.filter(item => item.box === box.name).length
}));

Answer 2

您需要保存Map中每个box的出现次数，然后，在你正在执行的第二个循环中获取每个出现的次数：

const userData = {
items: [
{ itemName: 'test book', category: 'Books', box: 'Box 3', location: 'Kitchen' },
{ itemName: 'test book 2', category: 'Books', box: 'Box 3', location: 'Kitchen' },
{ itemName: 'test book 3', category: 'Books', box: '', location: 'Basement' },
{ itemName: 'test record', category: 'Records', box: 'Box 1', location: 'Basement' },
{ itemName: 'test record 2', category: 'Records', box: 'Box 4', location: 'Basement' },
{ itemName: 'test furniture', category: 'Furniture', box: 'Box 2', location: 'Garage' },
{ itemName: 'test movie 1', category: 'Movies', box: 'Box 2', location: 'Garage' },
{ itemName: 'test movie 2', category: 'Movies', box: 'Box 2', location: 'Garage' },
{ itemName: 'test movie 3', category: 'Movies', box: 'Box 2', location: 'Garage' },
{ itemName: 'test Comicbook', category: 'Movies', box: 'Box 4', location: 'Basement' },
],
boxes: [
{ name: 'Box 1', location: 'Basement' },
{ name: 'Box 2', location: 'Garage' },
{ name: 'Box 3', location: 'Kitchen' },
{ name: 'Box 4', location: 'Basement' },
]
};
function boxCards() {
const boxesCount = userData.items
.reduce((quantity, {box}) => 
quantity.set(box, 1 + (quantity.get(box) || 0))
, new Map);
return userData.boxes
.filter(box => 
box.location === 'Basement'
)
.map(filteredBox => 
({ boxID: filteredBox.name, amount: boxesCount.get(filteredBox.name) })
);
}
console.log( boxCards() );