Question

不确定出了什么问题，以下代码会显示一张类似于面板的卡片，显示表格和标题但不是交互式手风琴。我检查代码来检查它确实显示与bootstrap示例显示的完全相同的结构。我试图将引导程序示例直接复制到我的Vue中，但它碰巧也有问题但是如果我将它们放入视图php它可以工作。所以我怀疑我的Vue没有正确地读取Bootstrap JS。但我已经将require('./bootstrap');放入我的app.js中，我希望这也能激活我的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。

Vue 2 Laravel 5.3 Bootstrap 4手风琴

1 个答案: