Как это сделать на Vue.js?

Question

[xXRustamXx]

Есть стартовый блок:

При выборе 1 из 3 вариатов появляеться нужный блок, контент у всех блоков разный - поэтому в массив их не засунуть т.к в шаблоне нужно вызывать методы, как можно реализовать данную задумку?

Comments

[Алексей Ярков]

С тематикой сайта вроде понятно =) Ссылку в студию.

[xXRustamXx]

Алексей Ярков, Лол у кого что болит) Это тесты для обучения сотрудников общаться с клиентами.

Answer 1

[0xD34F]

контент у всех блоков разный - поэтому в массив их не засунуть

Засунуть. За отличающийся контент пусть отвечает отдельное свойство элементов массива. Если же контент вот прям совсем разный, ничего общего - оформить блоки в виде отдельных компонентов, хранить в элементе массива имя компонента - ну а дальше вместе с v-for использовать :is.

Comments

[xXRustamXx]

Я ссылаюсь на компонент в свойстве элемена, но вывести этот компонент в директиве v-html не получаеться....

[0xD34F]

xXRustamXx, какой v-html, вы о чём?! Я же сказал - :is.

[xXRustamXx]

У меня в компоненте при клике на кнопку есть - метод который лежит не в компоненте а в общем обьекте vue, как я на него могу ссылаться в компоненте?

[0xD34F]

xXRustamXx, лучше никак. Правильным решением будет генерация события в дочернем компоненте и подписка на него в родительском (где вы и дёрнете нужный вам метод). За подробностями - в документацию.

[xXRustamXx]

0xD34F, Фух, задолбался с vue-cli переносить на codepen) компоненты добавил только в молодую группу для наглядности, вот ссылка: https://codepen.io/Metis/pen/KembaK?editors=1010
P.S Что скажешь, норм?

[0xD34F]

xXRustamXx, ну ок. Думаю, для вас будет нелишним познакомиться с такой штукой, как роутер (нет, это не предложение тотчас броситься всё переписывать с использованием роутера... но судя по вашему коду его использованием там прямо-таки напрашивается).

[xXRustamXx]

0xD34F, Есть нюансы по которым не подходит подход с роутером, тем не менее, то что я сделал имеет право на жизнь?)

[0xD34F]

xXRustamXx, имеет, если является решением стоящей перед вами задачи. Я бы на вашем месте вообще не сильно беспокоился такими вопросами. Главное - чтобы работало. А отрефакторить можно (если нужно) и потом.

[xXRustamXx]

0xD34F, Спасибо за помощь.