Как сделать развёртывание только того компонента на который был произведён клик с дальнейшим выводом данных?
Есть код, который генерирует карточки в зависимости от количества данных, в этих карточках так же генерируются кнопки, но при нажатии на кнопку в карточке разворачиваются все карточки с данными из той карточки на которую нажали.
<div class="card-block" v-for="(part,i) in partsData" :key="i">
<div class="card">
<div class="card-wrapper">
<div class="card-title" >
{{ part.materials ? part.materials : 'Н/Д' }}
</div>
<div class="card-description">
<div class="card-text">
<span class="span-title">Артикул:</span>
<span class="span-description">{{ part.vendorCode ? part.vendorCode : 'Н/Д' }}</span>
</div>
<div class="card-text" v-if="false">
<span class="span-title">Производитель:</span>
<span class="span-description">УРАЛ</span>
</div>
<div class="card-text" >
<span class="span-title">Модель ТС:</span>
<span class="span-description">{{ part.modelTechnique ? part.modelTechnique : 'Н/Д' }}</span>
</div>
<div class="card-text">
<span class="span-title">Модель ДВС:</span>
<span class="span-description">{{ part.modelEngine ? part.modelEngine : 'Н/Д' }}</span>
</div>
<div class="card-text count" >
<span class="span-title">Количество:</span>
<span class="span-description">{{ part.count ? part.count : 'Н/Д' }}</span>
</div>
<div class="card-block" v-if="loadedRepairLists" v-for="(list, j) in repairListsData" :key="j">
<div class="card">
<div class="card-wrapper">
<div class="card-title" >
{{ list.numberRepairList ? list.numberRepairList : 'Н/Д' }}
</div>
</div>
</div>
</div>
</div>
<div class="card-button" v-if="!loadedRepairLists">
<button class="more-button transparent" @click="checkRepairList(i)"><span>Развернуть</span></button>
</div>
<div class="card-button" v-if="loadedRepairLists">
<button class="more-button transparent" @click="loadedRepairLists = !loadedRepairLists"><span>Свернуть</span></button>
</div>
</div>
</div>
</div>
Скрипт написанный на Vue
checkRepairList(i) {
this.loadedRepairLists = false
this.currentPart = this.partsData[i]
console.log(this.currentPart)
axios.post('api/repairList', {
modelTechnique: this.currentPart.modelTechnique,
modelEngine: this.currentPart.modelEngine,
vendorCode: this.currentPart.vendorCode
})
.then(res => {
if(res.status === 200) {
this.repairListsData = res.data
}
this.loadedRepairLists = true
})
}
Источник: Stack Overflow на русском