我正在使用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')
当我点击我的按钮，它不会打开-有人可以帮我吗?
您缺少正确的目标id。触发器引用collapse1…
<template>
<div class="collapse" id="collapse1"> Some code in here </div>
</template>