why can’t use window in vue template?

@kimnamsun · August 13, 2023

문제상황

vue template 내에서 window.location.pathName을 이용해 처리해야하는 부분이 있었다.
아래 처럼 코드를 작성했더니 에러가 떴다.

<h1 v-if="window.location.pathName">Title</h1>

Alt text

원인

찾아보니 vue template에서 global scope variables를 사용할 수 없다는게 결론이였다..

https://stackoverflow.com/questions/55323010/why-cant-use-window-in-vue-template

해결

위의 링크에서 제시하는 해결법은 vuex를 사용한다던가, Mixins을 사용한다는 등의 몇가지 방법이 있었는데,
나는 그 중computed를 이용해서 해결했다.

computed: {
    getPathName() {
      return window.location.pathname;
    },
},
<h1 v-if="getPathName을 이용한 조건 작성">Title</h1>
@kimnamsun
frontend