1

我正在使用Vue-Formulate 的可重复组。对于我的要求：

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

例如，所需的初始外观在以下屏幕截图中，这是我在链接的代码框中单击“删除”/X 按钮后生成的： 在此处输入图像描述

我在这里的代码和框中对此进行了模拟：Vue Formulate Group with Button to Start

这可能吗？如果是这样，怎么做？

2021 年 5 月更新的解决方法

在@braid/vue-formulate@2.5.2中，下面的解决方法（在研究：似乎更新：曾经工作的黑客）不再有效，使用插槽覆盖关闭按钮，保存参考，并触发点击。另请参阅https://github.com/wearebraid/vue-formulate/issues/425上的相关功能请求。

<script>
  export default {
    // ... fluff omitted
    async mounted() {
      await this.$nextTick();
      if (!this.hasMessages) {
        // See also feature request at https://github.com/wearebraid/vue-formulate/issues/425
        this.$refs.closeButton.click();
      }
    },
  };
</script>

<template>
  <FormulateInput
    type="group"
    name="rangeMessages"
    :minimum="0"
    repeatable>
    <!-- See https://vueformulate.com/guide/inputs/types/group/#slots -->
    <template #remove="{removeItem}">
      <button ref="closeButton" @click.prevent="removeItem"/>
    </template>
  </FormulateInput>
</template>

研究 - Vue-Formulate 的文档

在Vue-Formulate 的input带有type="group"props 和 slots的文档中，有一个minimumprop。我已将其设置为零，但这不会改变初始外观。我确实看到了多个插槽，但我不太确定要使用哪个插槽，或者是否可以使用其中任何一个来实现我想要的；看起来像default, grouping, 并且repeatable可能有助于防止第一组的初始显示。

研究 - Vue-Formulate 的测试

我看到FormulateInputGroup.test.js测试了it('repeats the default slot when adding more'，所以default插槽是重复的内容。根据文档，default插槽还接收index作为插槽道具，所以这可能很有用。

研究 - Vue 调试器

我要最初删除的项目位于FormulateInputGroup > FormulateGrouping > FormulateRepeatableProvider > FormulateRepeatable > FormulateInput： Vue 调试器显示与 Vue 公式相关的元素的代码层次结构，输入为 type=

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

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

基于此更改，我希望我需要进行修改FormulateGrouping以获得所需的初始外观，但我还没有在源代码中找到哪些项目可供我使用。

研究：似乎更新的黑客：曾经工作

此 hack 在 v2.4.5 中有效，但从 2.5.2 开始，它不再有效。有关更新的解决方法，请参阅帖子顶部。

在挂载的钩子中，当我第一次渲染表单时，我可以对formValues传递的内容进行反省，v-model以查看该组是否缺少填充的初始元素。如果是这样，那么我可以使用类型 groupmsgs上的 refFormulateInput来调用 this.$refs.msgs.$children[0].$children[0].removeItem()，这会触发（空）项目的初始删除。这是超级hacky，所以我更喜欢更好的方法，但它有点工作。唯一的问题是它会在单击按钮时验证字段，然后再输入任何输入。

4

2 回答 2

3

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

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

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

于 2020-08-15T02:30:01.740 回答
1

提供的解决方案对我不起作用，但由于之前的回答，我设法找到了这个：

mounted(){
  Vue.set(this.formData, "groupData", [])
},

效果与

data(){
  formData: {
    groupData: [],
  },
},
mounted(){
  this.formData.groupData = []
},
于 2021-10-05T00:17:19.167 回答