When trying to create a collapsed card with Bootstrap 4 and Vue.js, I encountered some issues. Bootstrap 4 was functioning properly without Vue.js, maintaining the proper transitions and not expanding cards that were not clicked. However, after moving my code into Vue, I noticed that when clicking a button, both the desired card and other undesired cards were opening. Additionally, the transition effects were completely non-functional in Vue.js. The console displayed the following error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '0'. This may cause an update error.
found in
---> <Beginner> at src/views/beginner.vue
<App> at src/App.vue
<Root>
This is what I attempted:
prices.vue
<template>
<div class="prices">
<div class="container">
<h1 class="comfortHeader" id="comfortHeader" style="margin-bottom: 50px;">Our Prices</h1>
<!-- Rest of the HTML code goes here -->
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
data() {
return {
pricing: [{
name: 'price1',
expand: false,
items: [{
id: 1,
price1: "10 online lessons",
price2: "Interactive assignments",
// Additional price details go here
}]
}]
}
]
},
methods: {
navItemCollapse(index) {
this.pricing = this.pricing.map((item, i) => {
item.expand = !item.expand;
if (i !== index) {
item.expand = false;
}
return item;
});
},
navItemCollapse2(index) {
// Method for collapsing second set of cards
},
navItemCollapse3(index) {
// Method for collapsing third set of cards
}
}
</script>