Vue 2 - How / is it possible to create a unique layout during a v-for loop?

Question

I am trying to create a questionnaire. I have an array of questions. Each question is an object. During the loop the <component :is> checks the component property inside the question object. If the property equals an Input for example then an input will be shown and so on.

This works for simple questions. However the last question requires a more complex layout. Here 'Please add items' needs to have two inputs and an add button. Once pressed a table will appear with each row displaying the values passed into the fields from above. At the moment I can't do this as I am looping though a sub set of questions.

There could be 1000+ questions eventually and I am not sure whether creating a component for each question is the right approach?

I know my current approach isn't right some how but I am completely stuck how to approach this. Is there a way of looping through data and providing unique layouts for each question? The data structure isn't set in stone so feel free to change it. Thanks in advance.

https://codesandbox.io/embed/blazing-wood-ifnxym?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Within the v-for, you can wrap the elements in a <template>, and then just use v-if to determine which element is displayed.

For example :

<template v-for="question in question.questions" :key="question.id">
  <Input v-if="quetion.type === 'text'" :question="question" />
  <Radio v-if="quetion.type === 'choice'" :question="question" />
  ...
</template>