Currently, I am in the process of developing a web application using Laravel and Vue.js. As someone who is new to these frameworks, I am facing a challenge where I need to call a method inside a Vue component and display its return data within a v-for loop.
The IsAvailableRefund() function operates as follows:
At the create stage of the component, data is loaded and displayed in a table. When this data is loaded, the IsAvailableRefund() function is called with the invoice data passed to it. The return value is then shown in the table, enabling me to call it in the create function.
Below is an excerpt of my component code:
<tbody>
<tr div v-for="invoices in invoice">
<th scope="row">{{invoices.p_id}}</th>
<td>{{invoices.p_amount}}</td>
<td>{{invoices.p_qty}}</td>
<td>{{invoices.p_amount}}</td>
<td>
<!-- Here, I need to call the method and print its data: -->
{{IsAvailableRefund(invoices.p_id,'002') }}
</td>
</tr>
</tbody>This is my script:
export default{
data(){
return {
invoice:{},
}
},
methods{
IsAvailableRefund(p_id, invoice_id){
axios.get('/check-refund-data/'+p_id+'/'+incoice_id)
.then(function (response) {
console.log(response.data);
this.refund = response.data;
})
}
},
created(){
axios.get('/refund-data/002').then(response => {
this.invoice = response.data.invoice
console.log(response.data.invoice);
})
.catch(error => {
console.log(error);
})
}
}If anyone has any suggestions on how to solve this issue, please feel free to share. Thank you!