flatmap 需要额外的加载器

Question

我在 js 文件中有这个对象数组，并且我已经将 js 文件导入到 vue 文件中。

food.js

food = [
  {
    id: 1,
    name: "burger",
    ingredients: [
       {
         name: "tomato",
         amount: "2 pcs"
       },
       {
         name: "meat",
         amount: "2 pcs"
       }
    ]
  },
  {
    id: 2,
    name: "ice cream",
    ingredients: [
       {
         name: "milk",
         amount: "xxxx"
       },
       {
         name: "food coloring",
         amount: "xxxxx"
       }
    ]
  }
]

脚本

import { food } from '@/data/food'
export default { 
   components: {food},
   data() {
        return {
            ingredientsList: food.flatMap(q => q.ingredients)
        }
    },
}

我想从所有对象中获取所有成分，但是它显示了这个错误

File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     data() {
|         return {
>             ingredientsList: food.flatMap(q => q.ingredients)
|         }
|     },

我的代码是错误的还是我真的需要额外的加载器？我需要什么样的装载机？我到处搜索，但没有找到任何答案。谢谢

Answer 1

在food.js

检查name: burger我想你错过了"的报价，试试name: "bugger"

将export const food = [... 添加到：

export const food = [
  {
    id: 1,
    name: "burger",
    ingredients: [
       {
         name: "tomato",
         amount: "2 pcs"
       },
       {
         name: "meat",
         amount: "2 pcs"
       }
    ]
  },
  {
    id: 2,
    name: "ice cream",
    ingredients: [
       {
         name: "milk",
         amount: "xxxx"
       },
       {
         name: "food coloring",
         amount: "xxxxx"
       }
    ]
  }
]

在vue中

import { food } from '@/data/food.js'
export default {
   data() {
        return {
            ingredientsList: food.flatMap(q => q.ingredients)
        }
    }
}

Answer 2

确保food 数组位于data() 方法中以便使用它，或者在它位于另一个文件中时将其导入。

data() {
  const food = [
    {
      id: 1,
      name: burger,
      ingredients: [
         {
           name: "tomato",
           amount: "2 pcs"
         },
         {
           name: "meat",
           amount: "2 pcs"
         }
      ]
    },
    {
      id: 2,
      name: "ice cream",
      ingredients: [
         {
           name: "milk",
           amount: "xxxx"
         },
         {
           name: "food coloring",
           amount: "xxxxx"
         }
      ]
    }
  ];

  return {
    ingredientsList: food.flatMap(q => q.ingredients);
  }
}