[vue: worklist 제작] 3. 탭으로 1depth 인덱싱

App.vue 에서 다음과 같이 데이터를 받아왔다

<template>
  <div>
      <header>
        <Tab :tabLists="groupTitles"/>
      </header>
      
      <article class="content">
        <Group v-for="(group, idx) in groups" 
          :iaList="group" 
          :idx="idx" />
      </article>
  </div>
</template>

 

 

Tab.vue

<template>
  <div class="tab">
    <button type="button" 
      class="tab__item" 
      v-for="(item,idx) in tabLists"
      :key="item" 
      @click="quickMove(`groupTitle__${idx}`)"
    >{{item}}</button>
  </div> 
</template>

<script>
export default {
  name: 'tab',
  props:{
    tabLists : Array
  },
  methods:{
    quickMove : function(item){
      const pos = document.getElementById(item).offsetTop;
      const headerHeight = document.getElementsByTagName('header')[0].offsetHeight;
      window.scrollTo(0,pos-headerHeight)
    }
  }
}
</script>

groupTitle을 tabLists로 받아와서 

각 타이틀들을 button으로 감싸주고 click시 해당 그룹으로 이동할 method를 만든다 (quickMove)

 

quickMove(item)

매개변수로 받아온 groupTitle__1... 은

<Group> 컴포넌트안의 각 타이틀에 id값으로 같은 id사용하기로 한다

 

getElementById(item) 으로 group안의 타이틀 id를 찾고 위치를 찾는다(offsetTop) 

나는 tab이 페이지에서 항상 띄어둘것이기 때문에

그만큼의 높이값을 빼주어(headerHeight) 스크롤이 tab바로 아래에 보여지게한다

 

window 스크롤값을 이동시킨다