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

Question

我正在将 vue 与 vue formulate 一起使用，并希望构建一个带有 nested group.

的表单

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

标签列表只是一个示例，在我的真实应用中，嵌套对象更为复杂。对于此示例，我可以使用 , 分隔列表。

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

这是我的 codepen

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

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

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

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

有人知道怎么做吗？我还添加了 minimum="0" 到该组，但这没有效果。

这将是我想要的空标签列表的呈现状态：

Answer 1

尝试将表单初始化为空，然后在已安装的挂钩中根据需要用数据填充表单。 Here is resolved fork of your 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])">
    ...

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

Use empty list in nested groups in vue-formulate

javascript

vue.js

vue-formulate