最初将第一组隐藏在Vue-Formulate可重复组

问题描述

我正在使用Vue-Formulate's Repeatable Groups。对于我的要求：

添加一个组是可选的
如果按下按钮以添加组，则必须验证组中的字段
该表格最初不应显示该组；它应该显示添加组的按钮

例如，所需的初始外观在以下屏幕快照中，该屏幕快照是我在链接的代码和框中单击“删除” / X按钮后生成的：

我已经在这里的codeandBox上对此进行了模拟：Vue Formulate Group with Button to Start

这可能吗？如果可以，怎么办？

研究-Vue-Formulate的文档

在Vue-Formulate's docs on input with type="group"'s props and slots中，有一个minimum道具。我将其设置为零，但这不会更改初始外观。我确实看到了多个插槽，但是我不太确定要使用哪个插槽，或者我是否可以使用其中任何一个插槽来实现所需的功能。似乎default，grouping和repeatable可能有助于防止第一组的初始显示。

研究-Vue-Formulate的测试

我看到了FormulateInputGroup.test.js tests that it('repeats the default slot when adding more'，所以default位置就是重复出现的内容。根据文档，default插槽还接收index作为插槽道具，因此很有用。

研究-Vue调试器

我最初要删除的项目位于FormulateInputGroup > FormulateGrouping > FormulateRepeatableProvider > FormulateRepeatable > FormulateInput：

当我删除初始项目以匹配所需的初始布局时，组层次结构将更改为：

<FormulateInput><!-- the input type="group" -->
  <FormulateInputGroup>
    <FormulateGrouping/>
    <FormulateAddMore>...</FormulateAddMore>
  </FormulateInputGroup>
</FormulateInput>

基于此更改，我希望我需要修改FormulateGrouping才能获得所需的初始外观，但是我没有在源代码中找到在那里可以使用的项目。

研究：似乎可行的黑客行为

在挂接的钩子中，当我第一次渲染表单时，我可以对传递给formValues的{{1}}进行内省，以查看该组是否缺少填写的初始元素。如果是这样，那么我可以使用类型为v-model的组上的引用msgs来调用FormulateInput，这将触发对（空）项的初始删除。这是超级hacky，所以我更喜欢一种更好的方法，但是这种方法可行。唯一的问题是，在输入任何输入之前，单击按钮时它将验证字段。

解决方法

这是一个公平的问题，Vue Formulate曾经支持仅使用空数组作为开头的行为，但是很明显，这使用户感到困惑，如果没有空对象{{ 1}}当他们绑定模型时，进行了更改以将空数组的初始值视为“空”字段，并使用值对其进行预水合。但是，一旦完成初始水合作用，您就可以轻松地将其重新分配回一个空阵列，您就可以开始了。这很容易在[{}]生命周期挂钩中完成：

mounted

这是您的代码沙箱的一个分支：https://codesandbox.io/s/vue-formulate-group-with-button-to-start-forked-32jly?file=/src/components/Reproduction.vue

vue-formulate vue.js