vue / bootstrap carousel 자동넘기기 설정. $ref

# 문제점

carousel로 배너를 만들었는데, 다음버튼을 눌러야 그 후부터 auto slie가 되더라.

난 이 배너가 일정시간 간격으로 자동으로 사진이 넘어가면서 보이길 바란다.

 

 

# 예상해결방법

화면이 렌더링된 후, 자동으로 다음버튼을 한번 클릭하게 하면 그 후로는  자동으로 carousel이

넘어갈것같다.

 

 

 

# 방법

첫번째로 DOM요소를 js에서 컨트롤하기 위해서 가져와야한다.

    <div
      id="banner"
      class="carousel slide carousel-fade"
      data-bs-ride="carousel"
    >
      <div class="carousel-inner">
        <div
          v-for="(fileName, i) in assetsPath.banners"
          :key="fileName"
          class="carousel-item"
          :class="i == 0 ? 'active' : ''"
          data-bs-interval="1500"
        >
          <img
            :src="require('@/banners/' + state.make_path_short(fileName))"
            class="d-block w-100"
            alt="banners"
          />
        </div>
      </div>

      <button
        style="display: none"
        ref="banner_next"
        type="button"
        data-bs-target="#banner"
        data-bs-slide="next"
      ></button>
    </div>

여기서 버튼의 ref를 banner_next로 바꾸고 이 DOM을 methos에서 가져올것이다.

  methods: {
    click_next: function () {
      this.$refs.banner_next.click();
    },
  },

순서대로 this.$refs.아까정한 ref이름. click()

 

이 메서드는 아까 정해놨던 넥스트버튼을 클릭하게 하는것이다.

그럼 이제 이 메서드가 화면이 마운트된후 자동으로 한번 클릭되게 하면된다.

  mounted() {
    this.click_next();
  },

마운트가되면 버튼이 한번 클릭된다.

 

 

 

# 안된방법들

- 첫번째로 난 bootstrap의 interval설정을 찾았었는데 이상하게 일반 html사이트에서는

자동으로 넘기기가 바로 실행되었다. 하지만 vue에서는 'next 버튼 클릭이 한번 이상 발생되어야' 

그제서야 자동넘기기가 적용이 되었다.

 

- DOM을 쿼리셀렉터로 가져오기

next버튼을 스크립트로 가져와서 즉시실행함수로 클릭이 발생하게 하려고 했었다.

vue에서는 스크립트상에서 DOM에 접근하는걸 별로 안좋아한단다.. 

그래서 아무리 해도 가져온 엘레먼트값을 콘솔로찍어보면 null로 뜨더라.

vue에서는 지양하는 방법이라는데.. 답을 못찾겠어서 그냥 했다.