I would like to store the data for my Vue project in an external JSON file instead of within the Vue function itself.
I attempted to retrieve data from an external file using the code below, but encountered issues, possibly due to a conflict with the "items" property.
const app = new Vue({
data: {
taxRate: '',
to: '',
from: '',
items: ''
},
created: function () {
fetch('https://example.netlify.com/invoicedetails.json')
.then(resp => resp.json())
.then(items => {
this.items = items
})
}
});
Below is the code snippet necessary for extracting partial data:
new Vue({
data: {
taxRate: .13,
to: [
'University of Somewhere',
'118 Bureaucracy Lane',
'Cityville, CA 90210',
],
from: [
'Business Time Inc.',
'60 Paycheck Drive',
'Townsland, ON A1B 2CD',
'Canada',
],
items: [
[1, `Amazing product you can't live without`, 549],
[3, `Unnecessary extra item`, 49],
]
},
template: `
<div class="min-h-screen bg-gray-700 p-8 text-gray-900">
<div class="max-w-4xl mx-auto">
<div ref="quote" class="bg-white px-12 py-20">
<h1 class="uppercase font-bold text-gray-600 text-3xl border-b pb-8">Quote</h1>
<div class="mt-8 flex -mx-6">
<div class="w-1/2 px-6">
<div class="text-gray-700 font-bold text-sm mb-2">To:</div>
<div v-for="line in to">{{ line }}</div>
</div>
<div class="w-1/2 px-6">
<div class="text-gray-700 font-bold text-sm mb-2">From:</div>
<div v-for="line in from">{{ line }}</div>
</div>
</div>
<table class="w-full mt-8">
<thead>
<tr>
<th class="px-4 py-4 border-b text-right">Quantity</th>
<th class="px-4 py-4 border-b text-left">Description</th>
<th class="px-4 py-4 border-b text-right">Price</th>
<th class="px-4 py-4 border-b text-right">Total</th>
</tr>
</thead>
<tbody>
<tr v-for="[quantity, description, price] in items">
<td class="px-4 py-4 border-b text-right">{{ quantity }}</td>
<td class="px-4 py-4 border-b text-left">{{ description }}</td>
<td class="px-4 py-4 border-b text-right">{{ price | price }}</td>
<td class="px-4 py-4 border-b text-right">{{ price * quantity | price }}</td>
</tr>
<tr>
<td class="border-b"></td>
<td class="border-b"></td>
<td class="border-b px-4 py-4 text-right font-bold">Subtotal</td>
<td class="border-b px-4 py-4 text-right font-bold">{{ totalWithoutTaxes | price }}</td>
</tr>
<tr>
<td class="border-b"></td>
<td class="border-b"></td>
<td class="border-b px-4 py-4 text-right font-bold">Taxes</td>
<td class="border-b px-4 py-4 text-right font-bold">{{ taxes | price }}</td>
</tr>
<tr>
<td class="border-b"></td>
<td class="border-b"></td>
<td class="border-b px-4 py-4 text-right font-bold">Total</td>
<td class="border-b px-4 py-4 text-right font-bold">{{ total | price }}</td>
</tr>
</tbody>
</table>
<div class="mt-8 text-center text-gray-700">
All prices in USD.
</div>
</div>
</div>
</div>
`,
el: '#app',
computed: {
totalWithoutTaxes() {
return this.items.reduce((total, [quantity, _, price]) => {
return total + (quantity * price)
}, 0)
},
taxes() {
return this.totalWithoutTaxes * (1 + this.taxRate) - this.totalWithoutTaxes
},
total() {
return this.totalWithoutTaxes + this.taxes
},
},
filters: {
price: function (value) {
return `$${value.toFixed(2)}`
}
}
})
Access the CodePen here