Materi :

Source code latihan008.html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 008</title>
</head>
<body>
    <div id="app">
        <pemain-bola></pemain-bola>
    </div>
    <script src="vue.js"></script>
    <script src="latihan008.js"></script>
</body>
</html>

Source code latihan008.js :

Vue.component('pemain-bola', {
    template: `
        <div>
            <penjaga-gawang v-for="(keeper, index) in listPenjagaGawang" :key=index>
                {{ keeper.nama }} -- {{ keeper.pensiun ? 'Pensiun' : 'Aktif' }}
            </penjaga-gawang>
        </div>
    `,
    data() {
        return {
            listPenjagaGawang: [
                { nama: 'Fabien Barthez', pensiun: true },
                { nama: 'Alisson Becker', pensiun: false },
                { nama: 'Peter Schmeichel', pensiun: true },
                { nama: 'Kasper Schmeichel', pensiun: false },
                { nama: 'Thibaut Courtois', pensiun: false },
                { nama: 'Gianluga Pagliuca', pensiun: true },
                { nama: 'David De Gea', pensiun: false },
            ]
        }
    }
});

Vue.component('penjagaGawang', {
    template: `
        <li>
            <slot></slot>
        </li>
    `
});

new Vue ({    
    el: '#app'
});