Vue 2 Laravel 5.3 Bootstrap 4 Accordion

Question

Не знаете, что не так, следующий код приводит к панели, подобной карточке, показывающей таблицу и заголовок, но не интерактивный аккордеон. Я проверяю код, проверяя, что он показывает ту же структуру, что и пример загрузки. Я попытался скопировать пример bootstrap прямо в Vue, но у меня тоже возникла проблема, но если я поместил их в поле зрения php, это сработает. Поэтому я подозреваю, что мой Vue не совсем правильно прочитал Bootstrap JS. но я уже положил require('./bootstrap'); в свой app.js. Я ожидаю, что активирует JS в моем Vue тоже. Пожалуйста помоги. Хотя я не думаю, что код ничего не помогает, но я все равно присоединяю его для справки. Это не проблема моих кодов.

Item-сортировочный-liost.vue

<template> 
    <div> 
    <div id="accordion" role="tablist" aria-multiselectable="true"> 
     <div v-for="cat in cats" class="card"> 
      <div class="card-header" role="tab" :id="'heading'+cat.id"> 

       <a 
       data-toggle="collapse" 
       data-parent="#accordion" 
       :href="'#collapse'+cat.id" 
       aria-expanded="false" 
       :aria-controls="'collapse'+cat.id" 
       > 
       {{cat.name}} 
       </a> 
      </div> 

      <div :id="'collapse'+cat.id" class="collapse in" role="tabpanel" :aria-labelledby="'heading'+cat.id"> 
      <ul class="list-group"> 
       <li 
       v-for="subcat in subcats" 
       v-if="subcat.category_id == cat.id" 
       class="list-group-item" 
       > 
       <a 
       :name="subcat.name" 
       href="" 
       @click.prevent="getSelectedSubcatProducts(subcat.id)" 
       >{{subcat.name}}</a> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
</template> 

Answer 1

Это поздний ответ, но это трудно получить JQuery и Vue, чтобы хорошо играть друг с другом по разным причинам лучше описанных здесь: http://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Если вы хотите использовать Bootstrap в Vue.js, я рекомендую использовать BootstrapVue.