Challenge 1 / 1

Let's say we have a component that contains two data properties: firstName and lastName. To make our lives easier, we want to display these names using a single name variable in the template:

<template>
    <span :class="$style.component">{{ name }}</span>
</template>

What code would accomplish this in the best way?

<script>
export default {
    name: 'PersonComponent',
    data() {
        return {
            firstName: 'Ryan',
            lastName: 'Weaver',
            name: '',
        },
    },
    mounted() {
        this.name = this.firstName + ' ' + this.lastName;
    },
};
</script>

<script>
export default {
    name: 'PersonComponent',
    data() {
        return {
            firstName: 'Ryan',
            lastName: 'Weaver',
        },
    },
    computed {
        name() {
            const name = this.firstName + ' ' + this.lastName;
        },
    },
};
</script>

<script>
export default {
    name: 'PersonComponent',
    data() {
        return {
            firstName: 'Ryan',
            lastName: 'Weaver',
        },
    },
    computed {
        name() {
            this.name = this.firstName + ' ' + this.lastName;
        },
    },
};
</script>

<script>
export default {
    name: 'PersonComponent',
    data() {
        return {
            firstName: 'Ryan',
            lastName: 'Weaver',
        },
    },
    computed {
        name() {
            return (this.firstName + ' ' + this.lastName);
        },
    },
};
</script>

Rewatch the video