Use empty list in nested groups in vue-formulate

Question

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).

The list of tags is only an example and in my real app the nested object is more complex. For this example I could use a , separated list.

The problem now is, that even if I initialize the v-model of the form with [] it always shows 1 item. This is also discussed at this SO post, but without a suitable solution for me.

Here is my codepen for this

As you can see, there is for with a prefilled stundets array, where the student has a name but no tags. But the form displays a tag alltough there is an empty array provided.

{
  "students": [
    {
      "name": "Homer",
      "tags": []
    }
  ]
}

I can not use the workaround from the SO post above as I only get the last remove button as reference.

What I want is that the empty list is used and no input fields are rendered for the empty list.

Do anyone have an idea how to do this? I also added minimum="0" to the group but this had no effect.

This would be the render state I wanted to have for the empty tag list:

Answer 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])">
    ...

Answer 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:[] }]);
}