Challenge 1 / 1

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?

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

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

<script>
export default {
    name: 'MainComponent',
};
</script>

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

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

<script>
export default {
    name: 'MainComponent',
    data() {
        return {
            randomTurtleFact: window.randomTurtleFact,
        };
    },
};
</script>

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

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

<script>
export default {
    name: 'MainComponent',
    computed: {
        randomTurtleFact() {
            return window.randomTurtleFact;
        },
    },
};
</script>

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

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

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

Rewatch the video