在vue-formulate中的嵌套组中使用空列表

Question

我使用vue和vue格式，并希望用嵌套群构建一个表单。

例如，我有一个from with user (外部组)，每个用户都可以有一个标记列表(内部组)。

标签列表只是一个例子，在我的实际应用程序中，嵌套对象更复杂。对于这个例子，我可以使用一个,分隔的列表。

现在的问题是，即使我用[]初始化表单的v-model，它也总是显示1项。这一点在这个所以贴中也有讨论，但是没有一个适合我的解决方案。

这是我的码页

如您所见，有一个预填充的特技表演数组，其中学生有一个名字，但没有标签。但是表单显示了一个标记，这里提供了一个空数组。

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

​

​

我不能使用解决办法从上面的SO帖子，因为我只得到最后一个删除按钮作为参考。

我想要的是使用空列表，而没有为空列表呈现输入字段。

有人知道怎么做吗？我也添加了minimum="0"到小组，但这没有任何影响。

这将是我希望对空标记列表具有的呈现状态：

​

Answer 1

我解决这个问题的方法是使用组的插槽，在模板中添加一些条件。

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

Answer 2

试着将表单初始化为空，并在挂载的钩子中根据您的需要填充表单中的数据。这是您的代码解析叉。

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