조건부 렌더링 v-if

uoayop·2021년 4월 15일
0

Vue

목록 보기
1/4
post-thumbnail
  • <v-if> <v-else> 이용하기
<template v-if="getposition()">
   <v-btn rounded dark class="writeBtn mb-2" v-on:click="pagelink('addnotice')">글 쓰기</v-btn>
</template>
<div v-else></div>

v-if의 조건으로 함수를 넣어줘서 글을 쓸 수 있는 권한이 있는지 확인한다.

<script>
    methods:{
    	getposition(){
            var directory = ((window.location.href).split('/'))[3];
            if (directory === 'allnotice'){
               var position = JSON.parse(localStorage.getItem('user')).data.pid;
               if (position === 1 || position === 2) return true;
               else return false;
            }
            else { return true; }
        }
    
    }
</script>
  1. board 컴포넌트를 다른 페이지에서도 사용하므로, 현재 페이지가 allnotice 일때만 조건 검사를 하게 해놓는다.
  2. localStorage에 저장해놓은 유저의 pid를 가져온다.
  3. pid가 1이거나 2일때만 true를 리턴한다.

[아쉬운 점]

  • 현재 페이지 가져오는 방법 알아보기 🧐
    - 분맹히 window.location.href 이런 원시적인 방법말고,,
    페이지별로 props를 전달해서,, currPage를 저장하도록 구현할 수 있을 것 같은데 .., 아직 props를 다루는 게 미숙해서 구현을 못하고있다!!!!!
profile
slow and steady wins the race 🐢

0개의 댓글