40 lines
1.4 KiB
Vue
40 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import HistoryRecords from './HistoryRecords.vue';
|
|
import BodyDetailComponent from './BodyDetailComponent.vue';
|
|
import HeadersDetailComponent from './HeadersDetailComponent.vue';
|
|
|
|
const shownDetail = ref('none');
|
|
const currentShownData = ref('');
|
|
const currentIndex = ref(-1);
|
|
|
|
function showBody(body : string, index: number){
|
|
if( currentIndex.value == index && shownDetail.value == "body" ){
|
|
shownDetail.value = "none";
|
|
} else {
|
|
currentIndex.value = index;
|
|
shownDetail.value = "body";
|
|
currentShownData.value = body;
|
|
}
|
|
}
|
|
|
|
function showHeaders(headers: object, index: number){
|
|
if(currentIndex.value == index && shownDetail.value == "headers" ){
|
|
shownDetail.value = "none";
|
|
} else {
|
|
currentIndex.value = index;
|
|
shownDetail.value = "headers";
|
|
currentShownData.value = JSON.stringify(headers);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="w-full xl:w-5/12 flex flex-col gap-y-4">
|
|
<HistoryRecords class="h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
|
|
<BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
|
|
<HeadersDetailComponent :data="currentShownData" v-if="shownDetail == 'headers' "></HeadersDetailComponent>
|
|
</div>
|
|
</template> |