Vue props로 component에 메뉴 데이터 넘기기

1. Props

부모 컴포넌트 @/view/menu/AllMenuPage.vue 에서 자식 컴포넌트 @/components/menu/MenuListItem.vue로 menuItem을 넘긴다.

1. @/view/menu/AllMenuPage.vue
vuex의 mapGetters를 이용
created()에 request body에 들어갈 json data 객체를 생성하고 FETCH_MENUS 실행

<script>
import MenuListItem from '@/components/menu/MenuListItem.vue';
import { mapGetters } from 'vuex';

export default {
  components: {
    MenuListItem,
  },
  computed: {
    ...mapGetters(['menuItems']),
  },
  created() {
    const data = {
      header: {
        name: 'GetAllMenusRequest',
        userId: getUserFromCookie(),
      },
      payload: {
        storeId: localStorage.getItem('store-id'),
      },
    };
    this.$store.dispatch('FETCH_MENUS', data);
  },
  
  ...
};
</script>

2. @/store/actions.js 가

async FETCH_MENUS({ commit }, data) {
  const response = await fetchMenus(data);
  commit('SET_MENUS', response.data.payload.menus);
  return response;
},

이었으므로 menuItems가 response.data.payload.menus이 된다.

3. /components/menu/MenuListItem.vue
props로 menuItem이라는 Object를 받을 것이다.

<script>
export default {
  name: 'menu-item',
  props: {
    menuItem: Object,
  },
  ...
};
</script>

2. template 부분

1. @/view/menu/AllMenuPage.vue
자식 컴포넌트의 menuItem과 연결해준다.

<MenuListItem
  v-for="item in menuItems"
  :key="item.menuId"
  :menuItem="item"
></MenuListItem>

2. /components/menu/MenuListItem.vue

<template>
  <div class="menu-card" @click="goToMenuDetail(menuItem)">
    <img
         :src="
               menuItem.imgUrl
               ? require('@/assets/menu' + menuItem.imgUrl)
               : require('@/assets/drink.png')
         "
         alt="메뉴이미지"
         class="menu-img"
    />
    <div class="menu-text">
      <span class="menu-name">{{ menuItem.menuName }}</span>
      <span class="menu-detail">
        <span v-if="menuItem.smallHotPrice != null"
              >HOT {{ menuItem.smallHotPrice }}원</span
          >
        <span v-if="menuItem.smallHotPrice != null && menuItem.smallIcePrice != null"
              >,
        </span>
        <span v-if="menuItem.smallIcePrice != null"
              >ICE {{ menuItem.smallIcePrice }}원</span
          >
      </span>
    </div>
  </div>
</template>

※ 이미지를 프로젝트 폴더에 넣은 경우 url 처리
require를 이용한다.

    <img
         :src="
               menuItem.imgUrl
               ? require('@/assets/menu' + menuItem.imgUrl)
               : require('@/assets/drink.png')
         "
         alt="메뉴이미지"
         class="menu-img"
    />

3. 결과화면