javascriptvue.jsvue-formulate

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

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": []
    }
  ]
}

Form displaying a tag alltough tag list is empty

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: wanted render state

Solution

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