Как переключаться между компонентами при клике на список используя v-for?

Question

[litash]

Учу vue. Есть видео https://youtu.be/Q7CUJRbuZaU?t=2m43s
Как сделать тоже самое используя только не четыре линка как в видео а например список.

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

Хранить наименования я буду в массиве.

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

При клике на item нужно показывать компонент, предыдущий компонент что бы исчезал соответственно.
Так вообще нормально делать или я себе придумал что попало ? :)
Идея в общем то такая:
Слева будут itemы, при клике на item справа должен появится компонент.

Answer 1

[0xD34F]

Понадобятся два свойства - массив имён компонентов и имя выбранного в данный момент компонента:

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

На основе массива с именами создаётся список, элементам которого назначается обработчик клика, устанавливающий текущее имя компонента в качестве выбранного:

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

Если что-то выбрано, рендерим это что-то:

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

Comments

[litash]

супер, ты лучший, не первый раз помогаешь. А еще скажи пожалуйста как эти itemы называть не слитно или camelCase а так как я хочу, например "Good Evening"

[0xD34F]

В смысле - в списке? Пусть в массиве содержаться объекты с двумя свойствами - имя компонента и показываемый пользователю текст:

items: [
  { name: '...', title: '...' },
  { name: '...', title: '...' },
  ...
],

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

[litash]

0xD34F, ага)) самому в голову пришло только что. уже туплю. Спасибо тебе огромное!