Dynamically show content

Instead of hardcoding a table we want to use data. This data can come from anywhere but just to demonstrate we will add it to the vue script. Just under the component registration add the following code.

data() {
    return {
        teamMembers: [
            {
                name: 'Alan Shore',
                email: '[email protected]',
                title: 'Associate'
            },
            {
                name: 'Denny Crane',
                email: '[email protected]',
                title: 'Senior Partner'
            },
        ]
    }
}

Swap out our table code

We want to loop over our teamMembers as a member and use the dot object notation. Also note the {{ .... }} double curly brace notation which is the vue standard.

<tr v-for="member in teamMembers">
    <td>{{ member.name }}</td>
    <td>{{ member.email }}</td>
    <td>{{ member.title }}</td>
</tr>

The full Team code

<template>
    <layout>
        <h1>Meet Our Team!</h1>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Title</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="member in teamMembers">
                    <td>{{ member.name }}</td>
                    <td>{{ member.email }}</td>
                    <td>{{ member.title }}</td>
                </tr>
            </tbody>
        </table>
    </layout>
</template>

<script>
    import Layout from './Layout'

    export default {
        components: {
            Layout,
        },

        data() {
            return {
                teamMembers: [
                    {
                        name: 'Alan Shore',
                        email: '[email protected]',
                        title: 'Associate'
                    },
                    {
                        name: 'Denny Crane',
                        email: '[email protected]',
                        title: 'Senior Partner'
                    },
                ]
            }
        }
    }
</script>

Lets check our results

There should be no change in what we see on screen.

Homework Change some of the data or add new team members to see how the output changes. Try adding some additional fields such as "dob" or "salary"

Finally lets look at the last piece of the puzzle. Linking our server side data to our front end.

Part 4 - The Final Piece