Динамически показывать серийные номера в компоненте vue

Question

Позвольте мне объяснить, что именно я ищу.У меня есть проект, в котором есть интервью типа викторины, и у этого интервью есть вопросы.У меня есть 3 типа пользователей, и у каждого типа есть свои вопросы.Например, пользователь может иметь несколько ролей.если пользователь выбирает 2 роли, поэтому мне нужно показать ему вопросы для обоих типов.

Итак, я использую vue js.

Я сделал базовый компонент с именем Interview.vue, и в этом компоненте у меня есть еще 3 дочерних компонента специально для пользователей этого типа.

Допустим, у меня есть 3 типа пользователей - 1) шеф-повар 2) официант 3) бармен Итак, если пользователь выберет роль шеф-повара и бармена, я предоставлю те 2 компонента, у которых будут вопросы для этих конкретных ролей.

допустим ... у моего Chef.vue есть 2 вопроса.и Barman.vue имеет 3 вопроса.

Итак, я рендеринг этих 2 компонентов, я увижу 5 вопросов на веб-странице.

Мой вопрос: как мне дать каждому вопросу серийный номер.?

Answer 1

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

Вот пример реализации:

Vue.prototype.$elNum = 0;
Vue.prototype.$getElNum = () => Vue.prototype.$elNum += 1;

тогда всякий раз, когда вы создаете элемент в любом месте приложения,Вы можете установить key или serialNumber, установив его на this.$getElNum()