💚v-pagination💚 NodeList 생성 시기.

Template내부에

      <v-pagination

      v-model="page"

      ref="pagination"

      :length=pageLength

      :total-visible="10"

      />

이걸 넣어서 

  mounted(){

    const paginationContent = this.$refs.pagination.$el.querySelectorAll('.v-pagination__item > button > span.v-btn__content');

    console.log(paginationContent);

 }

값을 불려올려했는데 나오지 않는다. 그래서 이후에 장식되는지 궁금해서 method를 통해 나오도록 해보았다.

method(){    

  testing(){

      console.log(this.$refs.pagination.$el.querySelectorAll('.v-pagination__item > button > span.v-btn__content'));

    },
}

그런데 나온다. 그래도 찾는건 확인했으니 더 늦는 beforeUpdate오 Updated를 사용해봤는데 

  updated(){

    const paginationContent = this.$refs.pagination.$el.querySelectorAll('.v-pagination__item > button > span.v-btn__content');

    console.log(paginationContent);

  },

에서 나오더라. 그러니 v-pagination은 update때 장착된다.

그렇지만 뭐가 클릭될때마다 계속 반복해서 출력하는 상황을 볼것이다. 또한 이걸 의도하지 않았을것이다.

발생순서는 Method, Mounted, Updated이다. 물론 v-pagination의 NodeList는 Updated 이전이다.

그러니 updated에서 한번 이벤트를 발생시켜야할텐데. 두가지 방법이 있는 것 같다.

Updated에서 이벤트를 한번 호출하거나  위 paginationContent.length >0 일때까지 기다리던가.

기다리는건 다른 작업을 지연시키는 거지니까 비효율적일것 같고, 그럼 다른게 효과적이겠지? updated에서 이벤트를 한번만 발생시켜 주는거??

여기서 왜 내가 updated에서 위 pagenation nu,ber를 수정하려했을까??

next나 prev에서 수정해주면 될 것을.