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

Question

我目前正在开发一个库存应用程序，我正在尝试显示 boxID 和 该盒子内的物品数量 在我制作的 baseCard 组件上。

我做的计算出来的属性boxCards需要把数据吐出来这个格式 [{title: '', amount: null}] 所以它可以被推到每个 baseCard 元素上。

目前我的计算属性正在给我标题，但我不知道如何获得每个盒子内的物品数量。

boxesInLocation returns 这个数组：["", "Box 1", "Box 4", "Box 4"]

太棒了，但现在我需要计算每个框在该区域出现的次数，然后将其推送到 中的 reshapedItems 函数：现货.

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

此外，仅减少数组不会将数字吐出到 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() );

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

How to use reduce to pass information to a base component? / Getting correct data passed with computed props in VueJS

javascript

reduce

components

vue.js