Как запустить функцию интервала карусели при загрузке в компоненте на vue.js?

Question

Я хочу запустить функцию интервала карусели для карусели Bootstrap 4 в компоненте на Vue.js. Когда я вставляю в скрипт скрипт в index.html, он работает. Но я не могу работать в компоненте. Как я могу запустить его?

код, который я упомянул здесь:

$(".carousel").carousel({
    interval: 200
  });

<template>
  <div
    id="slider-1"
    class="carousel slide pull-full-screen"
    data-ride="carousel"
  >
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="../images/slides/cycling.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="../images/slides/diving.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="../images/slides/parachuting.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
  </div>
</template>

Answer 1

Попробуйте поместить это утверждение в mounted хук следующим образом:

   mounted(){
       $(".carousel").carousel({ interval: 200 });
    }

check this codepen sample