The first page we're going to create is the All Products page this in very simple at the moment and will display all the products located in the products data JSON file. This page will be accessed at the root of our application as defined in the Vue Router. A Vue single file component is split up into three different sections, the HTML, the JavaScript and any additional styles for the component.

#Vue Methods

On the object we need to have a data point to store the products which are displayed on the page, so that we can define a new data point of products as an array.

data(){
    return{
        products: []
    }
}

Each Vue component has a number of lifecycle hooks we can access to preform different tasks at different times. On the created action of the component we're going to fetch the product data from the API and store this in the products data point. To access the API we're using the library Vue resource to GET all the products from the Node.js API created in a previous tutorial.

methods: {
    fetchProductData: function()
    {
        this.$http.get('http://localhost:3000/api/products').then((response) => {
            this.products = response.body;
        }, (response) => {

        });
    }
}

Now on the created event of the Vue component it will fetch data from the API, store this in products data point which we can access from the HTML. Inside the HTML we need to create the table to display the data, Vue allows us to very easily loop through the data and display each product in a new row on the table by using the v-for attribute.

<tr v-for="product in products">
    <td>{{ product.id }}</td>
    <td>{{ product.name }}</td>
    <td>{{ product.price }}</td>
    <td>
        <router-link :to="{name: 'edit_product', params: { id: product.id }}" class="btn btn-primary">Edit</router-link>
        <router-link :to="{name: 'delete_product', params: { id: product.id }}" class="btn btn-danger">Delete</router-link>
    </td>
</tr>

This will loop through each object in the products JSON and create a new row populated with that product data.

<template>
    <div id="all-products">
        <h1>All Products</h1>

        <p><router-link :to="{ name: 'create_product' }" class="btn btn-primary">Create Product</router-link></p>
        <table class="table table-hover">
            <thead>
            <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Price</td>
                <td>Actions</td>
            </tr>
            </thead>

            <tbody>
                <tr v-for="product in products">
                    <td>{{ product.id }}</td>
                    <td>{{ product.name }}</td>
                    <td>{{ product.price }}</td>
                    <td>
                        <router-link :to="{name: 'edit_product', params: { id: product.id }}" class="btn btn-primary">Edit</router-link>
                        <router-link :to="{name: 'delete_product', params: { id: product.id }}" class="btn btn-danger">Delete</router-link>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                products: []
            }
        },

        created: function()
        {
            this.fetchProductData();
        },

        methods: {
            fetchProductData: function()
            {
                this.$http.get('http://localhost:3000/api/products').then((response) => {
                    this.products = response.body;
                }, (response) => {

                });
            }
        }
    }
</script>