하위메뉴 만들기

https://vuetifyjs.com/ko/components/lists/

List component — Vuetify.js

<template>
  <div>   
    <v-list>
      <v-list-group
        v-for="(item, i) in items"
        :key="i"
        v-model="item.active"
        :prepend-icon="item.icon"
        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="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>
      </v-list-group>
    </v-list>
  </div>
</template>
<script>
export default {
  props: ['footer'],
  data () {
    return {
      items: [
        {
          title: 'home',
          icon: 'mdi-home',
          subItems: [
            {
              title: 'Dashboard',
              to: '/'
            },
            {
              title: 'About',
              to: '/about'
            }
          ]
        },
        {
          title: 'about',
          active: true,
          icon: 'mdi-account',
          subItems: [
            {
              title: 'xxx',
              to: '/xxx'
            }
          ]
        }
      ]
    }
  }
}
</script>

v-model

• Vue에서 양방향 바인딩을 가능하게 한다.

• 단방향 바인딩은 데이터를 화면에 출력

• 양방향 바인딩은 화면에서 입력을 받아 데이터로 다시 전달하는 과정이 추가되어 양쪽 방향 모두 바인딩 되는 것을 의미

prepend-icon : 아이콘을 표시함.

v-slot:activator : activator라는 슬롯에 v-content 부터 넣어준다는 의미

no-action : 메뉴를 보기 좋게 하기 위해 서브메뉴의 앞쪽을 띄움.

active :true -> 파란색으로 선택되어져 있는 상태

to=> 누르면 이동을 시키라는 의미이다.