What is the correct way to draw output through the for loop of a form field?

Question

Vue.js

Is it possible to output two different form elements at the same time through the v-for directive - input and textarea? For example, as in the picture:



The list itself in the script looks like this:

{
    id: 0,
    title: 'Phone',
    type: 'text'
},
{
    id: 1,
    title: 'Message',
    type: 'textarea'
},

I can’t figure out what property to specify here so that after the loop is completed, the input is displayed first, and then the textarea.

Answer 1

I think you need to do this:

<div v-for="element in emelents">
   <div v-if="element.type === 'text'">
      <input />
   </div>
   <div v-if="element.type === 'textarea'">
      <textarea><textarea/>
   </div>
</div>