javascript - 如何使用内置的验证事件将验证有效负载发送到堆栈以形成向导？

Question

Vue JS 的新手！我正在使用 Formulate + Vue-form-wizard 创建一个多步骤表单。我正在尝试遵循最佳实践并将 $emit 验证支付给向导，但它似乎没有抓住它。

每个组件都是一个选项卡，在里面我使用公式，似乎能够在本地捕获事件，我可以在屏幕上显示值：

<template>
    <div>
        <FormulateForm 
        v-model="values" 
        :schema="schema"
        ref="firstTabForm"
        @validation="validation = $event"
        >
        </FormulateForm>
        <pre>
            {{validation}}
        </pre>  
    </div>
</template>

<script>
export default {
  data() {
    return {
      values: {},
      validation: {},
      schema: [
            {
                type: "group",
                repeatable: true,
                name: "qty-price",
                class: "center",
                validation: "required",
                addLabel: "+ Add row",
                children: [
                    {
                    component: "div",
                    class: "double-row",
                    children: [
                                {
                                name: "quantity",
                                type: "number",
                                label: "Quantity",
                                validation: "required|number|min:1",
                                min: "1",
                                },
                                {
                                name: "Price",
                                type: "number",
                                label: "$ Pricess",
                                validation: "required|number|min:1",
                                min: "1",
                                },
                            ],
                    },
                ],
            },
      ],
    };
  },
};
</script>

正如我提到的，我将公式选项卡放在 vue-form-wizard 中以创建一个多步骤选项卡，并尝试在移动到下一步之前验证每个步骤，我想捕获验证甚至有效负载，但无论我把方法它似乎没有触发：

<template>
  <div id="app">
    <div>
      <form-wizard @on-complete="onComplete" color="gray" error-color="#a94442" shape="tab">
        <tab-content
          title="Personal details"
          icon="ti-user"
          @validation="validatit($event)"
        >
          <firstTab
            ref="firstTabForm"
            @validation="validatit($event)">
          </firstTab>
        </tab-content>

        <tab-content
          title="Additional Info"
          icon="ti-settings"
          :before-change="validateSecondTab"
        >
          <secondTab ref="secondTabForm"> </secondTab>
        </tab-content>
        <tab-content title="Last step" icon="ti-check">
          <h4>Your json is ready!</h4>
          <div class="panel-body">
            <pre v-if="model" v-html="prettyJSON(model)"></pre>
          </div>
        </tab-content>
      </form-wizard>
    </div>
  </div>
</template>

<script>
import firstTab from "./components/firstTab.vue";
import secondTab from "./components/secondTab.vue";
export default {
  name: "app",
  components: {
    firstTab,
    secondTab,
  },
  data() {
    return {
      model: {},
    };
  },

  methods: {
    onComplete: function () {
      alert("Yay. Done!");
    },

    },
    validateSecondTab: function () {
      return this.$refs.secondTabForm.validate();
    },
    validatit: function(validationpaylaod) {
      console.log(validationpaylaod);
    },

    prettyJSON: function (json) {
      if (json) {
        json = JSON.stringify(json, undefined, 4);
        json = json.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
        //eslint-disable-next-line
        return json.replace(
          /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
          function (match) {
            var cls = "number";
            if (/^"/.test(match)) {
              if (/:$/.test(match)) {
                cls = "key";
              } else {
                cls = "string";
              }
            } else if (/true|false/.test(match)) {
              cls = "boolean";
            } else if (/null/.test(match)) {
              cls = "null";
            }
            return '<span class="' + cls + '">' + match + "</span>";
          }
        );
      }
    },
  },
};
</script>

任何帮助深表感谢 ！