Question

我使用vee-validate进行表单验证。

一切顺利，直到我尝试使用其嵌套观察者功能： https://logaretm.github.io/vee-validate/guide/forms.html#persisting-provider-state

我知道了

[Vue警告]：属性或方法“ handleSubmit”未在实例，但在渲染过程中被引用。确保此属性是在data选项中或对于基于类的组件，通过初始化属性。

当我尝试单击“下一步”按钮时。

我使用CDN在我的项目中导入vee-validate，所以我猜它应该是最新版本？

所以我真的不知道它有什么问题...

这是我的代码：

<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>

vue方法：

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

        this.step++;
    },

未定义属性或方法“ handleSubmit”

0 个答案: