vue.js. How to substitute a component with data on a link click?

Question

JavaScript

Good evening!
There is a structure of the main html template, as an example:

<template>
   <img src="img.jpg" />
   <a>Узнать детали</a>
</template>

and there is a template number 2, which contains the html code, which should be substituted into the main template by clicking on the "Learn details" link. The code:

<template>
   <p>Детальное описание изображения: {{ item.description }}</p>
</template>

How to correctly implement this on VUE.JS?
is it possible to do it with a tag <component></component>or some other way?

Answer 1

Throw the second pattern into the first one and output it by v-if condition