body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
Simple Invoice Application
| Invoice ID | Customer Name | Total Amount | Status | Action |
|---|---|---|---|---|
| {{ invoice.id }} | {{ invoice.customerName }} | {{ invoice.totalAmount }} | {{ invoice.status }} |
const app = Vue.createApp({
data() {
return {
invoices: [
{ id: 1, customerName: ‘John Doe’, totalAmount: 100.00, status: ‘Paid’ },
{ id: 2, customerName: ‘Jane Smith’, totalAmount: 150.00, status: ‘Pending’ },
{ id: 3, customerName: ‘Bob Johnson’, totalAmount: 75.00, status: ‘Paid’ }
]
}
},
methods: {
viewInvoice(id) {
// Implement logic to view the selected invoice
alert(`Viewing invoice ${id}`);
}
}
});
app.mount(‘#app’);
Awesome tutorial..! This is un underrated channel due to not adopting fancy video creation methods.
why all axios request return 500 response?! even in the portfolio project i had the same issue!
Thank you for the tutorial!
thank you
Thank you for the tutorial!
I can't get customer_name instead of customer_id
the codes are the same as yours, but it does not show any error and it does not show the customer's name
I appreciate if you could help me with that thank you
🙏 Promo sm
Thank you for the tutorial!
hoping for the next video soon …… 😍
thanks 😍
thnx for the tutorial, hoping for the next vid soon
Very good !!!