Property or method "handleSubmit" is not defined

Question

I use vee-validate to do my form validation.

All goes well until I tried to use its Nested Observers function: https://logaretm.github.io/vee-validate/guide/forms.html#persisting-provider-state

I got:

[Vue warn]: Property or method "handleSubmit" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

when I try to click "Next step" button.

I used CDN to import vee-validate in my project, so it should be the latest verions, I guess?

So I really can't figure out what wrong with it...

Here is my code:

<ValidationObserver ref="form" v-slot="{ handleSubmit }">
    <form id="applyApp" @submit.prevent="handleSubmit(onSubmit)">

      <fieldset v-if="step === 1">
        <h3>Step 1 </h3>
        <div class="trademark-name">
          <h4>tradmarkLook</h4>
          <validation-provider rules="required" v-slot="{ errors }">
          <input
            v-model="name"
            type="text"
            placeholder="name"
            class="form-control form-control-lg"
            required
          >
          <p class="error-msg">@{{ errors[0] }}</p>
        </validation-provider>
        </div>
      </fieldset>

      <fieldset v-else-if="step === 2">
        <legend>Step 2</legend>
        <validation-provider name="first name" rules="required" v-slot="{ errors }">
          <input v-model="fname" type="text" placeholder="Your first name">
          <span>@{{ errors[0] }}</span>
        </validation-provider>

        <validation-provider name="last name" rules="required" v-slot="{ errors }">
          <input v-model="lname" type="text" placeholder="Your last name">
          <span>@{{ errors[0] }}</span>
        </validation-provider>
      </fieldset>

      <fieldset v-else-if="step === 3">
        <legend>Step 3</legend>
        <validation-provider name="address" rules="required|min:5" v-slot="{ errors }">
          <textarea v-model="address" type="text" placeholder="Your address"></textarea>
          <span>@{{ errors[0] }}</span>
        </validation-provider>
      </fieldset>

      <button type="submit" class="next-step" v-if="step != totalSteps">Next step</button>
    </form>
  </ValidationObserver>

And vue methods:

onSubmit() {
            if (this.step === 3) {
                alert('Form submitted!');
                return;
            }

        this.step++;
    },

Answer 1

The form button (or however you submit) needs to call the handleSubmit method by passing in you onSubmit method:

<button @click="handleSubmit(onSubmit)" v-if="step != totalSteps">Next step</button>

VeeValidate will then "validate" the form.