Vee Validate 验证不会在表单提交时触发

Question

鉴于使用 Vee Validate 3.x 的多步骤表单，我在提交表单时无法让表单触发验证错误。 它在与输入交互时起作用，但在表单提交时不会触发，我正在努力理解为什么以及我可以做些什么来解决这个问题。

我将附上 Codepen 链接以供参考，这是我的标记：

<ValidationObserver v-slot="{ handleSubmit, errors }">
  <pre>
    {{ errors }}
  </pre>
  <form @submit.stop.prevent="handleSubmit(submitDataFromWizard)">
    <h3>Step: {{ editor.step }}</h3>
    <br />
    <!-- Step 1 -->
    <section v-if="editor.step <= 2">
      <ValidationObserver :key="1">
        <validation-provider
          name="first-name"
          rules="required|min:2"
          v-slot="{ errors, classes }"
        >
          <label
            for="first-name"
            class="block text-xs font-medium text-gray-400 mb-2"
            >First Name</label
          >
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              key="editor-data-first-name-input"
              v-model="editor.data.first_name"
              type="text"
              id="first-name"
              class="focus:ring-indigo-500 focus:border-indigo-500 block w-full py-3 px-4 sm:text-sm border-gray-300 rounded-md mb-2"
              :class="getClassesForDataItem(classes)"
              placeholder="your first name..."
            />
          </div>
          <span class="block text-xs text-red-500 mt-1">{{
            errors[0]
          }}</span>
        </validation-provider>
      </ValidationObserver>
    </section>

    <!-- Step 2 -->
    <section v-if="editor.step >= 2">
      <ValidationObserver :key="2">
        <validation-provider
          name="last name"
          rules="required|min:2"
          v-slot="{ errors, classes }"
        >
          <label
            for="last-name"
            class="block text-xs font-medium text-gray-400 mb-2"
            >Last Name</label
          >
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              key="editor-data-last-name-input"
              v-model="editor.data.last_name"
              type="text"
              id="last-name"
              class="focus:ring-indigo-500 focus:border-indigo-500 block w-full py-3 px-4 sm:text-sm border-gray-300 rounded-md mb-2"
              :class="getClassesForDataItem(classes)"
              placeholder="your last name..."
            />
          </div>
          <span class="block text-xs text-red-500 mt-1">{{
            errors[0]
          }}</span>
        </validation-provider>
      </ValidationObserver>
    </section>

    <!-- Submit Form -->
    <button
      type="submit"
      class="flex mt-3 py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 rounded-full"
    >
      <strong v-if="editor.step <= 1">Next step</strong>
      <strong v-if="editor.step == 2">Confirm</strong>
    </button>
  </form>
</ValidationObserver>

我附上的JS是：

export default {
  data() {
    return {
      isEditingData: false,
      editor: {
        step: 1,
        data: null,
      },
    };
  },
  created() {
    this.mockFetchingDataForForm();
  },
  methods: {
    /*
     ** Editor wizard
     */
    submitDataFromWizard() {
      if (this.editor.step >= 2) {
        alert("submit the form");
      }

      // next step
      this.editor.step++;
    },

    /*
     ** Mocked request
     ** NOTE: in the real app, data for v-model inputs comes from API
     */
    mockFetchingDataForForm() {
      setTimeout(() => {
        this.editor.data = {
          first_name: "",
          last_name: "",
        };
        this.isEditingData = true;
      }, 2000);
    },

    /*
     ** Render classes for data item
     */
    getClassesForDataItem(errorClasses, ui = null) {
      if (errorClasses && errorClasses.failed) return errorClasses;
      if (ui == null) return;
      return ui
        ? "border-indigo-300 ring-indigo-50 ring-2"
        : "border-gray-300 ring-gray-50 ring-2";
    },
  },
};

Codepen 链接： https://codesandbox.io/s/vee-validate-3-sample-project-forked-dwqtt?file=/src/App.vue:3323-4414

Answer 1

查看您的代码框，您似乎正在使用 Vee-validate 3.0.10 。 它不支持在v3.2中引入的handleSubmit 。 尽管从3.0.11开始的早期版本确实包含对handleSubmit的引用，但它只是处于测试阶段，直到v3.2才正式引入。

要在package.json文件更改中解决此问题

"vee-validate": "3.0.10"`

至

"vee-validate": "3.4.5"

然后运行npm update以更新 package。

此外，我发现这篇文章非常有助于解释 npm 中的版本。