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

JavaScript Frameworks & Tools >

COURSE

The Delightful World of Vue >

CHAPTER

Reading Server Data & :global Classes

Buy Access to Course
Next Chapter

Challenge #1 of 1

Q: 

Suppose we have a global piece of data that we need to render in our template. This data is window.randomTurtleFact and contains a special fact about turtles that we randomly get from the server each time a template loads. Sweet! Sea turtles can't retract their heads and flippers!

Which of these examples would fail to render that global variable in the template?

a) 
<template>
    <h1>I love turtles</h1>

    <p>{{ window.randomTurtleFact }}</p>
</template>

<script>
export default {
    name: 'MainComponent',
};
</script>
b) 
<template>
    <h1>I love turtles</h1>

    <p>{{ randomTurtleFact }}</p>
</template>

<script>
export default {
    name: 'MainComponent',
    data() {
        return {
            randomTurtleFact: window.randomTurtleFact,
        };
    },
};
</script>
c) 
<template>
    <h1>I love turtles</h1>

    <p>{{ randomTurtleFact }}</p>
</template>

<script>
export default {
    name: 'MainComponent',
    computed: {
        randomTurtleFact() {
            return window.randomTurtleFact;
        },
    },
};
</script>
d) 
<template>
    <h1>I love turtles</h1>

    <p>{{ getRandomTurtleFact() }}</p>
</template>

<script>
export default {
    name: 'MainComponent',
    methods: {
        getRandomTurtleFact() {
            return window.randomTurtleFact;
        },
    },
};
</script>
Rewatch Video
userVoice