Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

JavaScript Frameworks & Tools >

COURSE

The Delightful World of Vue >

CHAPTER

Single File Component

Buy Access to Course
Next Chapter

Challenge #1 of 1

Q: 

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?

a) 
<h1>{{ title }}</h1>

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

<script>
const name = 'TitleComponent';
const data = {
    title: ''
};
</script>
c) 
<template>
    <h1>{{ title }}</h1>
</template>

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

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