Challenge 1 / 1

I LOVE hamsters. In fact, I love them so much that I wrote a Vue application that keeps track of all the hamsters I own. It's... a lot.

One of the key parts of the app is the Hamster Counter component, which has to keep track of the total number of hamsters I own and print it on the screen. But, I'm having trouble wiring the custom events that I created!

<template>
    <div>
        <h1>Hamster List</h1>
        <hamster-manager @on-hamster-list-update="updateCounter" />
    </div>
    <div>
        <hamster-counter :total-hamsters="totalHamsters" />
    </div>
</template>

What would the script section of this component look like in order to make this work (and be the best solution)?

<script>
export default {
    name: 'MainComponent',
    computed: {
        totalHamsters() {
            return 0;
        }
    },
    methods: {
        updateCounter(data) {
            this.totalHamsters = data.length;
        },
    },
};
</script>

<script>
export default {
    name: 'MainComponent',
    data() {
        return {
            hamstersLength: 0,
        };
    },
    computed: {
        totalHamsters() {
            return hamstersLength;
        }
    }
    methods: {
        updateCounter(data) {
            this.hamstersLength = data.length;
        },
    },
};
</script>

<script>
export default {
    name: 'MainComponent',
    props: {
        totalHamsters: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        updateCounter(data) {
            this.totalHamsters = data.length;
        },
    },
};
</script>

<script>
export default {
    name: 'MainComponent',
    data() {
        return {
            totalHamsters: 0,
        };
    },
    methods: {
        updateCounter(data) {
            this.totalHamsters = data.length;
        },
    },
};
</script>

Rewatch the video