Initially hide first group in Vue-Formulate repeatable group

问题

I'm using Vue-Formulate's Repeatable Groups. For my requirements:

A group is optional to add
If a button is pressed to add a group, then the fields in the group must be validated
The form should not initially show the group; it should show the button to add a group

For example, the desired initial appearance is in the following screenshot, which I generated after clicking the "remove" / X button in the linked codesandbox:

I've mocked this up at codesandbox here: Vue Formulate Group with Button to Start

Is this possible? If so, how?

Research - Vue-Formulate's Docs

In Vue-Formulate's docs on input with type="group"'s props and slots, there is a minimum prop. I've set that to zero, but that doesn't change the initial appearance. I do see multiple slots, but I'm not quite sure which one to use or if I could use any of them to achieve what I want; it seems like default, grouping, and repeatable might be useful in preventing the initial display of the first group.

Research - Vue-Formulate's Tests

I see that FormulateInputGroup.test.js tests that it('repeats the default slot when adding more', so the default slot is the content that gets repeated. According to the docs, the default slot also receives the index as a slot prop, so that could be useful.

Research - Vue Debugger

The item which I want to initially remove is at FormulateInputGroup > FormulateGrouping > FormulateRepeatableProvider > FormulateRepeatable > FormulateInput:

When I remove the initial item to match the desired initial layout, the group hierarchy changes to:

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

Based on this change, I would expect that I need to modify FormulateGrouping to get the desired initial appearance, but I haven't found in the source what items are available to me there.

Research: A hack that seems to work

In the mounted hook, when I first render the form, I can introspect into the formValues passed to v-model to see if the group lacks an initial elements that is filled out. If so, then I can make use of a ref msgs on the FormulateInput of type group to then call this.$refs.msgs.$children[0].$children[0].removeItem(), which triggers an initial remove of the (empty) item. This is super hacky, so I'd prefer a better way, but it kind of works. The only problem is that it validates the fields when clicking on the button, before any input has been entered.

回答1:

This is a fair question, and Vue Formulate used to support the behavior of just using an empty array to begin with, however it became clear that it was confusing to users that their fields would not show up without an empty object [{}] when they bound the model, so a change was made to consider an initial value of an empty array an "empty" field and pre-hydrate it with a value. Once that initial hydration is completed however, you can easily re-assign it back to an empty array and you're good to go. This is easily done in the mounted lifecycle hook:

...
async mounted () {
  await this.$nextTick()
  this.formData.groupData = []
}
...

Here's a fork of your code sandbox: https://codesandbox.io/s/vue-formulate-group-with-button-to-start-forked-32jly?file=/src/components/Reproduction.vue

来源：https://stackoverflow.com/questions/63366497/initially-hide-first-group-in-vue-formulate-repeatable-group

标签

Vue.js

vue-formulate