小编Iag*_*llo的帖子

开发人员，我正在使用 Vuejs 并且我在模态中有一个表单，我需要使用vuelidate在客户端验证表单的字段。

我也使用bootstrap-vue来创建模态，但是当我实现验证时，我无法让“取消”按钮一键清除字段和验证。它关闭模态，清理字段，但是当我再次打开它时，字段是红色的，显示验证错误，我必须再次单击取消以清理验证（不想这样做！）。我的模板和脚本如下。

模板

<b-modal
  id="signupFormModal"
  title="Crie a sua conta!"
  ref="modal"
  centered
  @ok="handleOk"
  @cancel="clearForm"
>
  <b-container fluid>
    <b-card>
      <b-form @submit.stop.prevent="handleSubmit">
        <b-form-group
          id="email"
          label-for="email"
        >
          <b-form-input
            ref="focusElement"
            autocomplete="username"
            id="email"
            type="email"
            v-model.trim="form.email"
            :state="$v.form.email.$dirty ? !$v.form.email.$error : null"
            @input="$v.form.email.$touch()"
            required
            placeholder="E-mail"
          />
        <small class="error">{{emailErrors}}</small>
        </b-form-group>
      </b-form>
    </b-card>
  </b-container>
</b-modal>

脚本

import { required, minLength, sameAs, email } from 'vuelidate/lib/validators'

export default {  
name: 'myForm',
  data: () => ({
    form: {
      email: '',
      password: '', …