How to connect button and components?

Question

Vue.js

Tell me how to connect 2 components: one with a button, when clicked, the second component with content is called?

Answer 1

I do like this, but I don't have select ...
In template :

<ul class="uk-nav">
<li class="uk-button-primary uk-button"
v-for="item in items"
v-bind:key="item.id"
v-on:click="CurrentComponent = (item.component)"
>{{ item.name }}
</li>
</ul>
...
<div class="uk-placeholder uk-margin-top">
<component v-bind:is="CurrentComponent"></component>
</div>
...

in script

import PageOpen from './PageOpen';
data: function init() {
return {
items: [
{id: 40,
component: PageOpen,
name: 'Кто может стать участником программы',},
],
CurrentComponent: Home, // НЕ забываем что CurrentComponent нужно чем то заполнить. Default.
},.....