JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<div id="app">
<form v-for="(n, i) in formsData">
<div>
xxx:
<input v-model="n.xxx">
</div>
<div>
yyy:
<input v-model="n.yyy">
</div>
<div v-if="i & 1">
zzz:
<div><textarea v-model="n.zzzzzzzzzzzzzz"></textarea></div>
</div>
</form>
<pre>{{ formsData }}</pre>
</div>
CSS
form {
border: 1px solid silver;
margin: 10px;
padding: 10px;
font-family: monospace;
}
JavaScript
new Vue({
el: '#app',
data: () => ({
formsData: [...Array(5)].map(() => ({})),
}),
mounted() {
this.$el
.querySelectorAll('form input, form textarea')
.forEach(n => n.dispatchEvent(new Event('input')));
},
});