bootstrap-4 - Bootstrap / Vue.js - 折叠

Question

我正在使用 Bootstrap 5.1 或 4.6（它不适用于任何一个版本）和 Vue.js 2。

我需要以下功能：我想单击具有折叠功能的按钮。

现在我的第一个 Vue 组件中有以下代码：

<template>
  <!-- Menu class for first process -->
  <div class="row mt-5 mb-3">
  <div class="col-12">
    <!-- collapse -->
    <a class="btn btn-secondary btn-block d-grid" data-bs-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapse1">
      <h4 class="text left font-weight-normal">
        <span class="ml-3">Collapse 1</span>
      </h4>
    </a>
  </div>
    <collapseThis/>
  </div>
</template>


<script>

import collapseThis from './collapseThis.vue'

export default {
  name: 'collapse1',
  components: {
    collapseThis,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

在我的第二个 Vue 组件中，我有以下代码：

<template>
 <div class="collapse" id="collapse"> Some code in here </div>
</template>

<!-- also with export default and style - but it's not really relevant in here -->

我的 main.js：

import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

//Vue.config.productionTip = false

Vue.use(BootstrapVue)

Vue.use(IconsPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

当我点击我的按钮时，它不会打开 - 有人可以帮我吗？

标签： bootstrap-4vuejs2collapsebootstrap-5

Answer 1

您缺少正确的目标 ID。触发器正在引用collapse1...

<template>
 <div class="collapse" id="collapse1"> Some code in here </div>
</template>

演示