Challenge #1 of 2

Suppose we have a component named TitleComponent that is ready to be used. This component accepts a title prop and we want to populate it with the value of an imaginary data key called categoryName. Our main component looks like this:

<template>
    <title-component />
</template>

<script>
import TitleComponent from '@/components/title-component';

export default {
    name: 'MainComponent',
    components: {
        TitleComponent
    },
    data() {
        return {
            categoryName: 'Broken Cups',
        }
    },
};
</script>

How would you pass this value down to a property of title-component using the shortcut syntax?

<template>
    <title-component :title="categoryName" />
</template>

<template>
    <title-component title="{{ categoryName }}" />
</template>

<template>
    <title-component :title="{{ categoryName }}" />
</template>

<template>
    <title-component :title="'categoryName'" />
</template>

Rewatch Video

TRACK

JavaScript Frameworks & Tools >

COURSE

The Delightful World of Vue >

CHAPTER

v-bind: Dynamic Attributes

Challenge #1 of 2