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?

TRACK

JavaScript Frameworks & Tools >

COURSE

The Delightful World of Vue Part 2