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

Question

我正在使用带有 vue 公式的 vue，并希望构建一个带有嵌套组的表单。

例如，我有一个用户（外部组），每个用户都可以有一个标签列表（内部组）。

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

现在的问题是，即使我v-model用 [] 初始化表单，它总是显示 1 个项目。这也在此SO post中进行了讨论，但没有适合我的解决方案。

这是我的代码笔

如您所见，有一个预填充的 stundets 数组，其中学生有名字但没有标签。但是表单显示了一个标签，尽管提供了一个空数组。

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

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

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

有谁知道如何做到这一点？我也加入minimum="0"了该组，但这没有效果。

这将是我想要的空标签列表的渲染状态：

Answer 1

尝试将表单初始化为空，并在挂载的钩子中根据您的需要用数据填充表单。这是您的 codepen 的已解决分支。

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

Answer 2

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

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