How to switch between components when clicking on a list using v-for?

Question

Vue.js

I am learning vue. There is a video https://youtu.be/Q7CUJRbuZaU?t=2m43s
How to do the same using only not four links as in the video, but for example a list.

li.list-group-item(
  v-for="item in items"
)
{{ item.name }}

I will store the names in an array.

var  items = [
  { name: 'test1' },
  { name: 'test2' },
  { name: 'test3' }
]

When you click on an item, you need to show the component, the previous component would disappear accordingly.
Is it normal to do this, or am I just imagining something? :)
The idea in general is this:
There will be items on the left, when you click on an item, a component should appear on the right.

Answer 1

You will need two properties - an array of component names and the name of the currently selected component:

data: () => ({
  items: [ 'имя-компонента-1', 'имя-компонента-2', 'имя-компонента-3' ],
  selected: null,
}),

Based on the array with names, a list is created, the elements of which are assigned a click handler that sets the current name of the component as the selected one:

<li
  v-for="n in items"
  v-text="n"
  @click="selected = n"
></li>

If something is selected, render that something:

<component v-if="selected" :is="selected"></component>