<template>
    <div class="menu-list">
      <MenuItem
        v-for="(item, index) in menuItems"
        :key="index"
        :productName="item.productName"
        :image="item.image"
        :temperature="item.temperature"
        :capacity="item.capacity"
        :price="item.price"
      />
    </div>
  </template>
  
  <script>
  import MenuItem from "../view/MenuItem.vue";
  
  export default {
    components: { MenuItem },
    data() {
      return {
        menuItems: [
          {
            productName: "金典冷萃咖啡",
            image: "path-to-image.jpg",
            temperature: "冷",
            capacity: "400ml",
            price: 33,
          },
          // 添加其他菜单项
        ],
      };
    },
  };
  </script>
  
  <style scoped>
  .menu-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  </style>
  