Challenge 1 / 1

Imagine you want to build a .vue single file component that renders a page header. It needs to have a title data key that it uses to render the template.

Which one of these code snippets would accomplish this?

<h1>{{ title }}</h1>

<script>
const component = {
    name: 'TitleComponent',
    data: {
        title: '',
    },
};
</script>

<template>
    <h1>{{ title }}</h1>
</template>

<script>
const name = 'TitleComponent';
const data = {
    title: ''
};
</script>

<template>
    <h1>{{ title }}</h1>
</template>

<script>
const name = 'TitleComponent';
const data = function() {
    return {
        title: ''
    };
};
</script>

<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
    name: 'TitleComponent',
    data() {
        return { title: '' };
    },
};
</script>

Rewatch the video