Dynamically show a Vue 2 component
Using Vue you define the application layout using components. In the beginning you manually place components where you want, but at some point you need to have a more flexible way to show or hide components based on the application state
Using conditional directives
The simplest option is to use the v-if
and v-else
directives.
Here’s an example. The v-if
directive checks the noTodos
computed property, which returns false if the state property todos
contains at least one item:
<template>
<main>
<AddFirstTodo v-if="noTodos" />
<div v-else>
<AddTodo />
<Todos :todos=todos />
</div>
</main>
</template>
<script>
export default {
data() {
return {
todos: [],
}
},
computed: {
noTodos() {
return this.todos.length === 0
}
}
}
</script>
This allows to solve the needs of many applications without reaching for more complex setups. Conditionals can be nested, too, like this:
<template>
<main>
<Component1 v-if="shouldShowComponent1" />
<div v-else>
<Component2 v-if="shouldShowComponent2" />
<div v-else>
<Component3 />
</div>
</div>
</main>
</template>
Using the component
Component and is
Instead of creating v-if
and v-else
structures, you can build your template so that there’s a placeholder that will be dynamically assigned a component.
That’s what the component
component does, with the help of the v-bind:is
directive.
<component v-bind:is="componentName"></component>
componentName
is a property of the state that identifies the name of the component that we want to render. It can be part of the state, or a computed property:
<script>
export default {
data() {
return {
componentName: 'aComponent',
}
}
}
</script>
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X