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