Move data from Vue function to an external JSON file

Question

I am looking to have the data for a Vue project, stored in an external JSON file rather than within the Vue function itself.

I have tried using the code below to get data from an external file but can't get it to work. Perhaps because of the conflict with "items"

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
        })
    }
    });

Here is the code needed for partial extraction of the 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)}`
    }
    }
})

Here is the CodePen

Answer 1

You can move the data to vuex store. You can read more here ( https://vuex.vuejs.org/guide/ )

If you need to test your app with rest api data, you can use https://github.com/indexzero/http-server .