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

infood.js

检查name: burger我想你漏掉了报价"，试试name: "bugger"

addexport const food = [...to:

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);
}
}