Javascript 依赖于bootstrap.js的旋转木马在vue.js组件中不起作用

在我的

public/index.html

文件中，我包含了

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

---

但似乎什么都不管用。。。如何使旋转木马工作？

您必须有多张幻灯片！在这种情况下有两个。根据某些条件，我的实际代码大约有4-5个。

<div id="carousel" class="carousel slide">
 <div class="carousel-inner">
  <div class="dialog carousel-item active">
   <div class="d-block w-100">
    <span>You have <router-link to="/invitations">{{invitationsPending}} Pending Invitation(s)</router-link></span>
   </div>
  </div>
  <div class="dialog carousel-item">
   <div class="d-block w-100">
    <span>Redeem your Free Coffee!</span>
   </div>
  </div>
 </div>
</div>

mounted(){
 let script = document.createElement('script')
 script.setAttribute('src', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js')
 document.body.appendChild(script)
}