vuetify의 Navigation Drawers 컴포넌트 동작하지 않을 때(Vue3)

vuetify의 Navigation Drawer를 사용하며

Examples처럼 작동하지 않는 문제를 겪어서 해결 방법을 공유하려고 한다!

 

 

 

[Vuetify 공식 문서]

https://vuetifyjs.com/en/components/navigation-drawers/#bottom-drawer

 

 

 

 

 

---

구현하려는 것

 

아래처럼 아이콘을 클릭할때마다 열리고 닫히는 Drawer를 구현하려고 했었다.

 

 

 

 

 

 

 

 

---

내가 작성한 코드

 

내가 작성한 코드에서 필요한 부분만 가지고 왔다.

 

<v-app-bar-nav-icon>은  <v-app-bar> 안에 작성하고

<v-navigation-drawer>은 <v-app-bar> 밖에 작성한다.

 

<script> 내에 drawer를 선언하고 false로 초기값을 정의한다!

 

<v-app-bar-nav-icon>을 클릭하면 drawer의 boolean값을 변경하도록 작성하고,

<v-navigation-drawer>에 v-model을 통해 drawer를 바인딩 해준다.

 

여기까지 Vuetify의 Examples와 그냥 똑같다.

 

다른 점이라고 하면

Vuetify는 Options API를 사용했고,

나는 Composition API를 사용했다는 점이다.

 

<template>
  <v-app-bar class="header" flat floating height="100" promient>
    <v-app-bar-title class="header__title">
      <v-btn>
        HYEPPY
      </v-btn>
    </v-app-bar-title>

	<!-- drawer 열고 닫는 아이콘 -->
    <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  </v-app-bar>

  <!-- drawer -->
  <v-navigation-drawer v-model="drawer" location="bottom" temporary>
    <v-list :items="navItemList"> </v-list>
  </v-navigation-drawer>
</template>

<script lang="ts" setup>

let drawer = false; // drawer기본값을 false로 해서 처음에는 열리지 않도록
const navItemList = [ // drawer 열었을 떄 보이는 list-item 배열
  {
    title: "Foo",
    value: "foo",
  },
  {
    title: "Bar",
    value: "bar",
  },
  {
    title: "Fizz",
    value: "fizz",
  },
  {
    title: "Buzz",
    value: "buzz",
  },
];
</script>

 

 

 

---

문제 발생

 

보이는 것과 같이 아무리 아이콘을 눌러도 drawer가 열리지 않았다.

 

 

 

 

 

 

---

문제 파악하기

 

changeDrawerValue 함수를 추가하여

<v-app-bar-nav-icon>에 클릭했을 떄 drawer 값이 잘 변경되는지 콘솔에 찍어봤다.

 

drawer의 값은 변경되었는데

그럼에도 navigation drawer는 열리지 않았다

 

이것을 보고 나는

v-model에 바인딩한 drawer가 전달이 안되는 것 같은 느낌이 빡 들었다!!

state가 반응형이 아닌 느낌적인 느낌!!

 

<v-app-bar-nav-icon @click.stop="changeDrawerValue"></v-app-bar-nav-icon>

<script lang="ts" setup>
function changeDrawerValue() {
  drawer = !drawer;
  console.log(drawer);
}
</script>

 

 

 

 

---

문제 원인 파익 및 해결

 

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-reactive-state

 

바로 공식 문서 들어가서 냅다 reactive로 검색했고

다음과 같은 결과를 얻었다

 

Composition API에서 반응형 state를 사용하고 싶으면 ref()를 써라~

 

 

 

 

내가 Vue2도 사용하면서 Options API를 사용했는데,

여기서는 data() {} 내부에 state를 정의하면 반응형 state를 사용할 수 있었다.

 

그래서 ref() 쓸 생각은 전혀 못했네..

 

 

 

 

 

 

---

문제 해결 및 결과

 

전체 코드와 결과는 아래와 같다!

 

잘 동작한다!!👍

 

<template>
  <v-app-bar class="header" flat floating height="100" promient>
    <v-app-bar-title class="header__title">
      <v-btn>
        HYEPPY
      </v-btn>
    </v-app-bar-title>

	<!-- drawer 열고 닫는 아이콘 -->
    <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  </v-app-bar>

  <!-- drawer -->
  <v-navigation-drawer v-model="drawer" location="bottom" temporary>
    <v-list :items="navItemList"> </v-list>
  </v-navigation-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const drawer = ref(false); // ref로 수정!!!
const navItemList = [ 
  {
    title: "Foo",
    value: "foo",
  },
  {
    title: "Bar",
    value: "bar",
  },
  {
    title: "Fizz",
    value: "fizz",
  },
  {
    title: "Buzz",
    value: "buzz",
  },
];
</script>