The Delightful World of Vue Part 2
Product Template & Color Selector
  Unlock this challenge
Login Register

Challenge 1 / 1

Imagine that our product template has a section that is wrapped in a v-if directive, only to be shown if product !== null, as shown in this lesson.

<template>
    <div :class="$style.component">
        <loading v-show="loading" />

        <h1 v-if="product !== null">{{ product.title }}</h1>
    </div>
</template>

<script>
export default {
    name: 'ProductComponent',
    data() {
        return {
            loading: true,
            product: null,
        };
    },
    // Some more computed, life cycle functions and methods here
};
</script>

What would happen if we removed this v-if and let the page render either way?

Skip challenges and go to theNext Chapter

Turn Challenges Off?

All further challenges will be skipped automatically.
You can re-enable challenges at any time on this page or from your account page.