Challenge 1 / 1
Say we have 2 components and we need to dynamically render them based on a condition. One of them will be rendered if we have information about a pizza's topping, while the other will be rendered if such information is null.
Here's our component with the two sub components rendered using a v-if
directive:
<template>
<pizza-list v-if="pizzaTopping === null" />
<pizza-description v-if="pizzaTopping !== null" />
</template>
<script>
import PizzaList from '@/components/pizza-list';
import PizzaDescription from '@/components/pizza-description';
import { getPizzaToppingInfo } from '@/helpers/get-pizza-topping-info';
export default {
name: 'PizzaPage',
data() {
return {
pizzaTopping: getPizzaToppingInfo(),
};
},
computed: {
dynamicComponent() {
return this.pizzaTopping === null ? PizzaList : PizzaDescription;
}
},
};
</script>
How can we use the dynamicComponent
computed property to
render the correct component based on this.pizzaTopping
?
Skip challenges and go to theNext Chapter