13. Vue와 Firebase로 나만의 사이트 만들기 - 메뉴 그룹화하기

 

 

 

VF - 13강

 

 

 

---

• 이번 강에서는 menu grouping에 대해 알아볼 것이다.
• 아래와 같이 현재의 메뉴는 일차원 배열이다.

• 일차원적 배열은 잘 쓰이지 않으며, 서브 메뉴를 가지는 메뉴로 변경할 것이다.
• vuetify 공식 사이트의 Lists 예제가 잘 작성되어 있기 때문에 그대로 사용할 것이다.
  • https://vuetifyjs.com/en/components/lists/#expansion-lists

List component

 

• 작성하면 아래와 같다.

<!-- menuView.vue -->
<template>
  <div>
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title class="text-h6">
          Application
        </v-list-item-title>
        <v-list-item-subtitle>
          subtext
        </v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>

    <v-divider></v-divider>
    <v-card
      class="mx-auto"
      max-width="500"
    >
      <v-toolbar
        color="teal"
        dark
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Topics</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-toolbar>

      <v-list>
        <v-list-group
          v-for="item in items"
          :key="item.title"
          v-model="item.active"
          :prepend-icon="item.action"
          no-action
        >
          <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </v-list-item-content>
          </template>

          <v-list-item
            v-for="child in item.items"
            :key="child.title"
          >
            <v-list-item-content>
              <v-list-item-title v-text="child.title"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-group>
      </v-list>
    </v-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {
          action: 'mdi-ticket',
          items: [{ title: 'List Item' }],
          title: 'Attractions'
        },
        {
          action: 'mdi-silverware-fork-knife',
          active: true,
          items: [
            { title: 'Breakfast & brunch' },
            { title: 'New American' },
            { title: 'Sushi' }
          ],
          title: 'Dining'
        },
        {
          action: 'mdi-school',
          items: [{ title: 'List Item' }],
          title: 'Education'
        },
        {
          action: 'mdi-human-male-female-child',
          items: [{ title: 'List Item' }],
          title: 'Family'
        },
        {
          action: 'mdi-bottle-tonic-plus',
          items: [{ title: 'List Item' }],
          title: 'Health'
        },
        {
          action: 'mdi-briefcase',
          items: [{ title: 'List Item' }],
          title: 'Office'
        },
        {
          action: 'mdi-tag',
          items: [{ title: 'List Item' }],
          title: 'Promotions'
        }
      ],
      right: null
    }
  }
}
</script>

<style>

</style>

• 위 코드를 그대로 쓸 것이지만 몇 가지 수정할 것이다.
• :key에서 item.title이라는 것을 사용하게 되면 중첩 문제가 있다. 같은 명칭을 사용하게 되면 문제가 되기 때문에 이럴 때에는 아래와 같이 변경해준다.

<!-- 변경 전 -->
<v-list-group
  v-for="item in items"
  :key="item.title"
  v-model="item.active"
  :prepend-icon="item.action"
  no-action
>
        
<!-- 변경 후-->
<v-list-group
  v-for="(item, i) in items"
  :key="i"
  v-model="item.active"
  :prepend-icon="item.icon"
  no-action
>

• (item, i)에서 item은 객체가 들어오고, i는 0부터 순차적인 숫자가 되는데 그래서 :key를 i로 해주는 것이 좋을 것이다. 
• :prepend-icon은 아이콘을 변경하는 속성으로 item.action보다는 item.icon이 좀 더 어울릴 것이다.
• no-action은 상위 속성에 들어가는 속성으로 상위 메뉴의 아이콘 크기에 맞춰서 하위 메뉴의 왼쪽에 padding 속성을 넣어주는 속성이다.

 

• v-slot:activator 속성은 주입시킨다는 뜻으로, activator 슬롯에다가 게임기에 팩을 꽂는 것처럼 <v-list-item-content>와 이 아래의 내용을 꽂는(넣는)다는 것을 의미한다.

 

• 서브 아이템 코드 부분도 아래와 같이 수정할 것이다.

<!-- 변경 전 -->
<v-list-item
  v-for="child in item.items"
  :key="child.title"
>
  <v-list-item-content>
    <v-list-item-title v-text="child.title"></v-list-item-title>
  </v-list-item-content>
</v-list-item>

<!-- 변경 후 -->
<v-list-item
  v-for="subItem in item.subItems"
  :key="subItem.title"
  :to="subItem.to"
>
  <v-list-item-content>
    <v-list-item-title v-text="subItem.title"></v-list-item-title>
  </v-list-item-content>
</v-list-item>

• child의 이름을 더 명확히 하기 위하여 subItem으로 변경하였고, items는 상위와 이름이 같기 때문에 구분을 위하여 subItems로 변경하였다.
• 그리고 하위 메뉴를 클릭하였을 때 이동을 위하여 :to 속성을 추가하였다.
• 변경된 <script> 내용은 아래와 같다.

<!-- menuView.vue -->
<script>
export default {
  data () {
    return {
      items: [
        {
          title: 'home',
          icon: 'mdi-home',
          subItems: [
            {
              title: 'Dashboard',
              to: '/'
            },
            {
              title: 'About',
              to: '/about'
            }
          ],

          to: '/'
        },
        {
          title: 'about',
          active: true,
          icon: 'mdi-account',
          subItems: [
            {
              title: 'xxx',
              to: '/xxx'
            }
          ],
          to: '/about'
        }
      ],
      right: null
    }
  }
}
</script>

• 결과 화면은 아래와 같다.

 

• 이렇게 해서 메뉴 그룹핑은 이런 방식으로 하는 것이더라 정도로 알아두면 될 것이다.

 

• memi dev 유튜브 강의 보기
  • https://memi.dev/board/lecture/1597405602280
  • https://www.youtube.com/watch?v=0QHkhvVOQ08 

13 메뉴 그룹화하기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---