[Vuejs]-Dynamic Vue.js Steppy Component Steps Based on array

0👍

Solved this Problem. The trick was to utilize dynamic slot names. You can find the details in the Vue.js documentation here:
https://vuejs.org/guide/components/slots.html#dynamic-slot-names

Example:

<template v-for="(conflict, index) in conflictTabs" :key="index" #[index+1]>
     <!-- Render content for each step based on conflict type -->
     <h2>{{ conflict.type }} Conflict</h2>
     <!-- ... Render resolution options for each conflict type ... -->. 
</template>

Using this dynamic Slot Name the name increases by one for every conflict #[index+1]

Leave a comment