Javascript 将引导折叠与v-for一起使用

我正在尝试在v-fordiv中使用bootstrap collapse（）

我的问题是: 如何仅打开单击的一个div，而不是所有div？（问题是，当我单击一个按钮时，所有div都打开了，所以我尝试了v-bind:id=“status.id”，但有些地方不太好……）

我的代码在这里：

 <template>
    <div class="container mt-3">
        <create-status ref="CreateStatus"></create-status>
    <div v-if="!statuses.length && !loading">
        <div class="d-flex justify-content-center mt-5">
            <h3><strong>Nema statusa.</strong></h3>
        </div>
    </div>

<div v-else-if="!statuses.length && loading">
      <div class="d-flex justify-content-center mt-5">
        <div class="spinner-border" role="status">

        </div>
      

      </div>
      <div class="d-flex justify-content-center mt-2">
        <h3><strong>Učitavanje...</strong></h3>
      </div>
    
    </div>

        <div v-else class="card mt-3" v-for="status in statusObject.data" v-bind:key="status.id">
            <div class="card-header d-flex">
                <div class="p-2"><b>{{status.authorName}}</b></div>
                <div class="ml-auto p-2">{{status.created}}</div>
                
            </div>
            <div v-html="status.description" class="card-body"></div>

            <div class="ml-auto"><button @click="deleteStatus(status.id)" class="btn btn-link">Izbriši</button></div>

            <a class="btn btn-primary"
             data-toggle="collapse"
              v-bind:href="'#'+status.id"
               role="button" aria-expanded="false">
    Link with href
  </a>

<div class="collapse" v-bind:id="status.id">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

        </div>
            <pagination class="mt-3" :data="statusObject" @pagination-change-page="getResults"></pagination>

    </div>
</template>

<script>
import Swal from "sweetalert2";
import VueToastr from "vue-toastr";


export default {
    name : "AllStatuses",
    
  data () {
      return {
          loading : true,
          statuses : [],
          statusObject : {},
          statuses : [],
          statusId : null,
      }
  },
    mounted() {
        this.fetchStatuses();
        // this.fetchComments();
    },
    methods : {
        // statusIdFunction (id) {
        //     this.statusId = id;
        //     console.log(id)
        // },
        // async fetchComments() {
        //     const {data} = await axios.get(`/api/status/${statusId}/comment`);
        //     this.statuses = data.data;
        //     this.statusId = null;
        // },
        async fetchStatuses() {
            const {data} = await axios.get('/api/status');
            this.statuses = data.data;
            this.statusObject = data;
            this.loading = false;
        },
        async deleteStatus(statusId) {
            const result = await Swal.fire({
            title: "Da li ste sigurni?",
            text: "Ovaj status će biti izbrisan!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#9b1c1c",
            cancelButtonColor: "#d2d6dc",
            confirmButtonText: "Obriši",
            cancelButtonText: "Odustani",
            reverseButtons: true,
      });
      if (!result.value) return;
      const {data} = await axios.delete(`/api/status/${statusId}`);
      this.$toastr.defaultPosition = "toast-bottom-right";
      this.$toastr.s("Status uspješno izbrisan!");
      return (this.statusObject.data = this.statusObject.data.filter(
        (status) => status.id !== statusId
      ));
        },
        getResults(page = 1) {
            axios.get('api/status?page=' + page)
                .then(response => {
                    this.statusObject = response.data;
                });
        },
    }
}
</script>

Nema状态A.
Učitavanje…
{{status.authorName}
{{status.created}}
伊兹布里什尼
动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred nesciunt sapiente ea proident。
从“sweetalert2”导入Swal；
从“vue toastr”导入VueToastr；
导出默认值{
名称：“所有状态”，
数据（）{
返回{
加载：对，
状态：[]，
状态对象：{}，
状态：[]，
statusId:null，
}
},
安装的（）{
this.fetchstatus（）；
//this.fetchComments（）；
},
方法：{
//状态功能（id）{
//this.statusId=id；
//控制台日志（id）
// },
//异步fetchComments（）{
//const{data}=wait axios.get（`/api/status/${statusId}/comment`）；
//this.status=data.data；
//this.statusId=null；
// },
异步获取状态（）{
const{data}=await axios.get（'/api/status'）；
this.status=data.data；
this.statusObject=数据；
这一点：加载=错误；
},
异步删除状态（statusId）{
const result=等待Swal.fire({
标题：“Da li ste sigurni？”，
文字：“Ovaj statusće biti izbrisan！”，
图标：“警告”，
showCancelButton:true，
confirmButtonColor:#9b1c1c“，
cancelButtonColor:#d2d6dc“，
confirmButtonText：“Obriši”，
cancelButtonText:“Odustani”，
反转按钮：正确，
});
如果（！result.value）返回；
const{data}=wait axios.delete（`/api/status/${statusId}`）；
这是。$toastr.defaultPosition=“toast bottom right”；
这是$toastr.s（“状态uspješno izbrisan！”）；
返回（this.statusObject.data=this.statusObject.data.filter(
（状态）=>status.id！==statusId
));
},
getResults（第1页）{
获取（'api/状态？页面='+页面）
。然后（响应=>{
this.statusObject=response.data；
});
},
}
}

下面是上面代码的关键部分：

    <a class="btn btn-primary"
             data-toggle="collapse"
              v-bind:href="'#'+status.id"
               role="button" aria-expanded="false">
    Link with href
  </a>

<div class="collapse" v-bind:id="status.id">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred nesciunt sapiente ea proident。

希望这是清楚的我想要什么。。。我想点击某个按钮，只是为了打开那个div，而不是其他的。。。提前谢谢