[Vuejs]-Flatmap need additional loader

by

0👍

✅

in food.js

check name: burger I think you missed the quote ", try name: "bugger"

add export 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"
       }
    ]
  }
]

in vue

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

0👍

Make sure that the food array is inside the data() method in order to use it, or import it when it’s in another file.

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

Leave a comment