Use Empty List In Nested Groups In Vue-formulate

I am using vue with vue formulate and want to build a form with a nested group. As example I have a from with users (outer group) and each user can have a list of tags (inner group

Solution 1:

My workaround to this problem is using the slots of the group an add some condition in the template.

<formulate-input type="group" name="..." repeatable>
  <template #repeatable="{ model, index, removeItem }">
    <div v-if="model && model.length > 0 && hasProperties(model[index])">
    ...

Solution 2:

Try initialize the form empty and in mounted hook fill the form with data according to your needs. Here is resolved fork of your codepen.

data: {
  form: {}
},
mounted(){
  Vue.set(this.form, "students", [{name:"Homer", tags:[] }]);
}