Как сделать развёртывание только того компонента на который был произведён клик с дальнейшим выводом данных?

Рейтинг: 0Ответов: 1Опубликовано: 10.07.2023

Есть код, который генерирует карточки в зависимости от количества данных, в этих карточках так же генерируются кнопки, но при нажатии на кнопку в карточке разворачиваются все карточки с данными из той карточки на которую нажали.

<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
                })

        }

Ответы

▲ 0Принят

Сделайте loadedRepairLists массивом.

this.loadedRepairLists[i] = true;

И проверяйте в соответствующих местах нужный элемент массива.