Как при клике на кнопки в компоненте Vue.js показывать один и тот же компонент но с разными данными?

Question

[litash]

Привет, есть компонент в котором кнопки, при клике на кнопку показывает другой компонент (синий), как в этот компонент (синий) при клике на кнопки в (зеленом компоненте) передавать этот же синий компонент только с разными данными, например что бы в списке были другие элементы списка и другой контент, в примере (some content). Я так понимаю можно сделать 4 компонента и их показывать но наверное это глупо. Помогите сделать толково :)

Вот пример:
https://codepen.io/litash/pen/qKvRQx

Answer 1

[Антон Швец]

https://codepen.io/anon/pen/GGLNRp

Comments

[litash]

Спасибо Вам!)

Answer 2

[0xD34F]

Передавайте "разные данные" в качестве параметров компонента.
В вашем случае это может выглядеть... допустим, так.

Comments

[litash]

Спасибо тебе огромное! каждый день открываю документацию но почти всегда на каком нибудь моменте перестаю понимать и все. тупик. Как это побороть - не знаю.

[litash]

0xD34F подскажи пожалуйста а как сделать тоже самое только не используя v-for для кнопок?

[0xD34F]

litash, ну, можете вручную сколько надо кнопок сделать, и каждой назначить отдельный обработчик клика... Как-то так:

<button @click="$emit('show-next', 0)">1</button>
<button @click="$emit('show-next', 1)">2</button>
...

Непонятно только зачем - ведь использование v-for гарантирует, что для каждого набора данных будет создана кнопка, и клик по ней будет обработан должным образом. А создавая кнопки вручную риск ошибиться только возрастает.

[litash]

0xD34F, спасибо!

[litash]

0xD34F , Привет, глянь пожалуйста Вот это, хочу по клику в списке слева сделать отображение компонента справа, ну и что-бы можно было дальше кликать по элементам списка и выводило разные данные. Или я там намутил воды уже?

[0xD34F]

litash, ничего не понял.

Лучше задайте новый вопрос, где будет более подробно описано, чего вы хотите добиться.

[litash]

0xD34F, понял