Vue 답노트 - 내가 보려고 쓴 vue 에러 노트

문제상황 : v-if를 사용해 메인 페이지에서만 보여주고 싶은 버튼이 있었다.

→ 처음엔 location.hash나 location.href를 이용해서 하면 되겠지?라고 생각했음

<templete>
 <button v-if = "location.hash === '/' "></button>
</templete>

결과는 작동이 안된다. 오류는 hash를 찾을 수 없다는 것이었다. 근데 또 스크립트 단이나 브라우저 콘솔창에서 찍으면 찍힌다. 템플릿 안에서만 유독 사용이 안되는 너...

→ 그러다 뷰 개발자 도구에서 $route.path를 발견! 이걸 이용해서 하면 되겠구나!!

<templete>
 <button v-if = "btnMainPage === '/'"></button>
</templete>

<script>
export default {
  data() {
    return {
      btn: this.$route.path,
    };
  },
</script>

결과는 성공적...인 줄 알았으나? 다른 페이지에서 버튼은 사라지지 않았다...

즉 v-if가 계획한대로 구현되진 않은 것이다.

콘솔에 찍어보니 페이지를 이동해도 $route.path는 바뀔 기미를 안보였고..

새로고침을 하자 그때서야 데이터가 바뀌었다.

→ 근데 신기한 건 개발자 도구에서 path는 계속 동적으로 바뀌고 있었다.

코린이 : 아.. 이걸 받아오는 쪽에서 뭔가 문제가 생겼구나..?

바로 구글링 Start!

영알못 : vue 라우터 데이터 접근, 데이터 가져오기, 데이터가 안 바뀌어요 등등...

가장 먼저 찾은 것은 watch라는 속성!

watch는 속성을 등록해 놓으면 얘가 등록된 속성을 지켜보고 있다가 뭔가 변화가 일어나면 바로 정해진 함수를 실행해주는 것이다. 그래서 route가 바뀌면 데이터를 다시 받아오는 함수를 코딩했다.

<templete>
 <button v-if = "btnMainPage === '/'"></button>
</templete>

<script>
export default {
  data() {
    return {
      btnMainPage: null,
    };
  },
	watch: {
    $route: "fetchData",
  },
	created() {
    this.fetchData();
  },
	
	methods: {
    fetchData() {
      this.btn = this.$route.path;
    },
  },

</script>

이렇게 하니 작동이 잘 되었다. 그리고...라우터에 대한 이해도 조금 증가한 기분이랄까..?

구글링하면서 도움이 정말 많이 된 블로그에게 무한 감사를 보내려고 다시 그 블로그를 들어가 봤다.

https://router.vuejs.org/kr/guide/advanced/data-fetching.html#탐색-후-가져오기

???

그렇다... 공식문서였다...

오늘의 교훈 : 공식문서를 잘 보자