Vue 2 Laravel 5.3ブートストラップ4アコーディオン

Question

何が間違っているかわからない場合、次のコードは、テーブルと見出しが表示されますが、インタラクティブなアコーディオンは表示されません。私は、コードがブートストラップの例と同じ構造を示しているかどうかを検査します。私はブートストラップの例を私のVueに直接コピーしようとしましたが、問題が発生します。しかし、それらをビューphpに入れれば動作します。だから私は、私のVueがBootstrap JSを正しく読まないと思っています。私は既に私のapp.jsにrequire('./bootstrap');を入れました。私はそれも私のVueでJSをアクティブにすると思います。助けてください。私はコードが何かを助けるとは思わないが、私はあなたの参照のためにそれを添付します。それは私のコードの問題ではないようです。

項目-ソート-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/

の場合Vue.jsでBootstrapを使いたいのですが、BootstrapVueを利用することをお勧めします。