@litash

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

Учу 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 справа должен появится компонент.
  • Вопрос задан
  • 783 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Понадобятся два свойства - массив имён компонентов и имя выбранного в данный момент компонента:

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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы