[Vue] 페이지 새로고침 기능을 만들자! (on-off 기능 추가)

bootstrap-vue 를 활용해서 새로고침 아이콘(b-icon) 으로 새로고침을 on-off 하는 기능을 만들자!

---

icon with tooltip

<template>
    <b-row style="padding: 10px; margin: 8px; float: right" v-b-tooltip.hover.left title="새로고침">
      <!-- 새로고침 on-off 여부에 따라 icon 다르게 보이게 하기 -->
      <b-icon v-if="isRefresh" icon="toggle-on" scale="2" v-on:click="setRefresh(false)"/>
      <b-icon v-else icon="toggle-off" scale="2" v-on:click="setRefresh(true)"/>
    </b-row>
</template>

<script>
export default {
  data: function() {
    return {
      // 새로고침 on-off 여부
      isRefresh: true,
      refreshEvent: undefined
    }
  },
  mounted() {
    // 새로고침 on-off 가 df:on 이므로 새로고침 event 먼저 binding
    this.refreshEvent = window.setInterval('location.reload()', 10000);
  },
  methods: {
    setRefresh(val) {
      // 새로고침 on-off 여부 변경 (click event)
      this.isRefresh = val;
      // 새로고침 on-off 여부가 바뀌면 새로고침 event 를 제거하거나 다시 binding 해주기
      if (val) {
        this.refreshEvent = window.setInterval('location.reload()', 10000);
      } else {
        window.clearInterval(this.refreshEvent);
      }
    }
  }
}
</script>

이제 간단한 조건문을 곁들인 컴포넌트 개발은 많이 헤매지 않고 할 수 있는 것 같다.

역시 백문이 불여일타 🤓