vue-json-excel containing data issue for multiple excel download - php

Question

I have the following table in vue component.
when click the download button what I need is to download an excel file including multiple data of a Spare Part. So the excel file looks like follows:
<download-excel v-if="spare_parts.length"
class="btn btn-view"
:data="json_data"
:fields="json_fields"
:title="['Equipments - Spare Part - '+ spare_part.name,'' ]"
worksheet="My Worksheet"
:name="'Equipments - Spare Part - '+spare_part.name+'.xls'">
<i class="fa fa-download sky-fa" title="Download Report" #click="getReportDetails(spare_part.sap)"></i>
</download-excel>
json_fields: {
'Equipment - Serial Number': {
callback: (value) => {
return `${value.maintenance.equipment.serial_number}`;
}
},
'Customer Name': {
callback: (value) => {
return `${value.maintenance.equipment.technical_customer.name}`;
}
},
'Unit Price (LKR) - Without VAT': {
callback: (value) => {
let final = '';
let VAT = '';
let decimalCount = 2;
let decimal = ".";
let thousands = ",";
let amount = `${value.cost}`;
try {
let decimalCount = Math.abs(decimalCount);
decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
const negativeSign = amount < 0 ? "-" : "";
let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
let j = (i.length > 3) ? i.length % 3 : 0;
final = negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "")
// return final;
} catch (e) {
console.log("Errors " + e);
}
return final;
}
},
'Unit Price (LKR) - With VAT': {
callback: (value) => {
let final = '';
let VAT = '';
VAT = (`${value.vat}` == 1) ? `${value.cost + (value.cost * (value.vat_percentage / 100))}` : '-';
if (`${value.vat}` == 1) {
let decimalCount = 2;
let decimal = ".";
let thousands = ",";
let amount = VAT;
try {
let decimalCount = Math.abs(decimalCount);
decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
const negativeSign = amount < 0 ? "-" : "";
let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
let j = (i.length > 3) ? i.length % 3 : 0;
final = negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "")
} catch (e) {
console.log("Errors " + e);
}
} else {
final = '-';
}
return final;
}
},
},
json_data: [],
json_meta: [
[
{
'key': 'charset',
'value': 'utf-8'
}
]
],
when clicking the icon it triggers the getReportDetails(spare_part.sap) function.
getReportDetails(name){
axios.get('/technical/sparepart/get-report/'+name)
.then(function (response) {
this.json_data = response.data;
if (this.json_data.length == 0) {
alert('No Data in this Spare Part');
}
}.bind(this))
.catch(error => {
console.log("Errors : " + error);
});
},
So the data which need to display inside the excel sheet is getting from this function by calling the following method in the SparePartController:
public function getReportDetails($name)
{
$maintenance_spare_parts = MaintenanceSparePart::with('maintenance.equipment.technicalCustomer')->where('spare_part', $name)->get();
return $maintenance_spare_parts;
}
I have 2 questions here.
When I click on the download icon downloading started at the second time click. But after that every next click the downloading is happening. Why always the second time?
After I download I can see the correct data in the excel sheet. But when I click the download icon in another row without page refreshing I'm getting the previous data in my excel file. What's the reason for that?
Can anyone point me where I did wrong in this case?