Here is the code snippet I am working with:
<template>
<div id="projects">
<Header />
<b-container>
<div class="row">
<div :class="colSize" v-for="(data, index) in projects" :key="data._id">
<b-card :title="data.name" :sub-title="user.jobresponsibilities">
<p class="card-text">
{{data.description}}
</p>
<b-btn v-b-toggle="'collapse'+index" @click="showCollapse(data)">Toggle Collapse</b-btn>
<b-collapse :id="'collapse'+index">
<b-card>
description
</b-card>
</b-collapse>
</b-card>
</div>
</div>
</b-container>
</div>
</template>
<script>
import Header from '@/components/Header'
export default {
name: 'dashboard',
components: {
Header
},
mounted() {},
methods: {
showCollapse(data) {
this.colSize = 'col-8'
}
},
data() {
return {
user: this.$store.getters.getUser,
projects: this.$store.getters.getProject,
colSize: 'col-4',
show: false
}
}
}
</script>
<style lang="scss">
#projects {
background-color: rgb(243, 243, 243);
}
</style>
Link to Store.js: https://jsbin.com/kejinihoci/edit?js
https://i.sstatic.net/wXewe.png
My goal is to change the column size and show the collapsible section only for the specific item when the toggle button is clicked.
I attempted to add an ID to the v-model to use it in my method, but without success.