The Delightful World of Vue Part 2
The Dynamic Component
  Unlock this challenge
Login Register

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

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.