Vue 2 Laravel 5.3 Bootstrap 4 Akkordeon

Question

Nicht sicher, was falsch ist, der folgende Code führt zu einer panelartigen Karte, die den Tisch und die Überschrift zeigt, aber kein interaktives Akkordeon. Ich überprüfe den Code von inspect es zeigt genau die gleiche Struktur wie bootstrap Beispiel zeigt. Ich habe versucht, das Bootstrap-Beispiel direkt in mein Vue zu kopieren, aber es hat auch ein Problem, aber wenn ich es in den View php stelle, funktioniert es. Ich vermute also, dass mein Vue das Bootstrap JS nicht richtig liest. aber ich habe bereits require('./bootstrap'); in meine app.js gesetzt. Ich erwarte, dass das JS auch in meinem Vue aktivieren würde. Bitte helfen Sie. Obwohl ich nicht glaube, dass der Code irgendetwas hilft, werde ich ihn trotzdem als Referenz anhängen. Es scheint nicht mein Code-Problem zu sein.

Artikelsortierung-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

Es ist eine späte Antwort, aber es ist schwierig, jQuery und Vue zu bekommen schön aus verschiedenen Gründen miteinander zu spielen, besser hier beschrieben: http://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Wenn Wenn Sie Bootstrap in Vue.js verwenden möchten, empfehle ich die Verwendung von BootstrapVue.