To utilize Bootstrap's Collapse components effectively, it is necessary to have sections (or cards) with unique IDs assigned to allow for independent collapsing and expanding. My challenge lies in creating multiple sections, each representing a data point, using the "v-for" directive from vue.js. However, I am unsure of how to automatically generate unique IDs for these cards. Here is my attempt:
<div id="story-content" class="content">
<div v-for="(subchapter, chapter) in story" class="card">
<div class="card-header">
<a href="'collapse' + generateNewId" class="card-link" data-toggle="collapse">
[[chapter]]
</a>
</div>
<div id="'collapse' + getCurrentId" class="collapse show" data-parent="#story-content">
<div class="card-body">
[[subchapter]]
</div>
</div>
</div>
</div>
<script>
var story = {{story | safe}};
var app = new Vue({
delimiters: [ '[[', ']]'],
el: '#portofolio',
data: {
story: story,
uniqueId: 0,
},
methods: {
generateNewId: function() {
return uniqueId + 1;
},
getCurrentId: function() {
return uniqueId;
}
}
})
</script>
Here is an example of the story data structure:
{
"Chapter1": {
"Subchapter1": {
"side_note": "January - June 2019",
"desc": "description here"
},
"Subchapter2": {
"side_note": "January - June 2019",
"desc": "description here"
}
},
"Chapter2": {
"Subchapter1": {
"side_note": "",
"desc": ""
}
}
}
P.S: I recently discovered the existence of bootstrap-vue, but since I wasn't aware of it during my initial learning phase, I opted not to use it. As a beginner in web development, I hope there is a solution to my unique ID generation issue without relying on bootstrap-vue, as it would require modifications to other components.