Javascript Vue.js 2.0 Vee Validate插件在ajax调用后未清除错误

我正在从事一个vue.js 2.0项目。我正在使用Vee验证插件。我有一个表单，当它提交时，它会对我的api进行ajax调用。api调用成功返回后，我尝试清除vee验证，以便可以邀请具有相同表单的其他用户，但它根本不起作用

我尝试了这个方法this.errors.clear（），正如他们的

我还认为它可能发生得太快了，所以我添加了一个设置超时的函数几秒钟，但它仍然没有清除错误

以下是我的Vue文件和所有相关代码：

    <template>
  <div v-if="user.first_time_login == 0 && user.stripe_check == 1">
    <div class="viv-modal-overlay">
      <div class="container">
        <div class="viv-modal green">
          <span class="modal-title" id="setup-team-top">Now let’s set up your team.</span>
          <p>Your plan allows up to {{this.user.company.max_users}} users. Would you like to shoot out some team invites before we send you to the dashboard?</p>
          <div class="invited-users" v-bind:class="{ show: show_invites }" v-if="show_invites">
            <p>You can invite up to 4 more team members. <a href="#">Upgrade to add more.</a></p>
            <ul>
              <li v-for="invite in invites">
                <img src="/img/icons/checkmark.svg" width="20" height="20" alt="success">
                You invited {{invite.email}}.
                <span class="clearfix"></span>
              </li>
            </ul>
            <div class="team-done-adding">
              <a href="#">I'm done adding team members.</a>
            </div>
          </div>
          <div class="modal-form">
            <form id="setup-stripe-form">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label>Team Member's Email<span>*</span></label>
                    <input type="text" name="email" v-model="newUser.email" v-validate data-vv-rules="required" class="form-control" :placeholder="'user@'+user.company.company_name.replace(/[^A-Z0-9]+/ig, '').toLowerCase()+'.com'">
                    <span v-show="errors.has('email')" class="error">{{ errors.first('email') }}</span>
                  </div>
                  <div class="form-group">
                    <label>Access to Leads and Contacts<span>*</span></label>
                    <select name="access_leads" v-model="newUser.access_leads" v-validate data-vv-rules="required" class="form-control">
                      <option value="1">they can see leads and contacts they created</option>
                      <option value="2">they can see all leads and contacts</option>
                      <option value="0">no access to leads and contacts</option>
                    </select>
                    <span v-show="errors.has('access_leads')" class="error">{{ errors.first('access_leads') }}</span>
                  </div>
                  <div class="form-group">
                    <label>Access to Proposals<span>*</span></label>
                    <select name="access_proposals" v-model="newUser.access_proposals" v-validate data-vv-rules="required" class="form-control">
                      <option value="1">they can see proposals they created</option>
                      <option value="2">they can see all proposals</option>
                      <option value="0">no access to proposals</option>
                    </select>
                    <span v-show="errors.has('access_proposals')" class="error">{{ errors.first('access_proposals') }}</span>
                  </div>
                  <div class="form-group">
                    <label>Access to Invoices<span>*</span></label>
                    <select name="access_invoices" v-model="newUser.access_invoices" v-validate data-vv-rules="required" class="form-control">
                      <option value="1">they can see invoices they created</option>
                      <option value="2">they can see all invoices</option>
                      <option value="0">no access to invoices</option>
                    </select>
                    <span v-show="errors.has('access_invoices')" class="error">{{ errors.first('access_invoices') }}</span>
                  </div>
                  <div class="form-group">
                    <label>Access to Projects<span>*</span></label>
                    <select name="access_projects" v-model="newUser.access_projects" v-validate data-vv-rules="required" class="form-control">
                      <option value="1">they can see projects they created</option>
                      <option value="2">they can see all projects</option>
                      <option value="0">no access to projects</option>
                    </select>
                    <span v-show="errors.has('access_projects')" class="error">{{ errors.first('access_projects') }}</span>
                  </div>
                </div>
                <div class="col-md-12 text-center">
                  <div class="modal-btn-pad">
                    <button type="submit" v-bind:class="{ disabled: adding_team_member }" class="btn btn-lg btn-green" @click="submitInviteForm">
                      <span class="sending-invite" v-if="adding_team_member">Sending Invite <img src="/img/preloader.svg" width="20" height="20"></span>
                      <span v-else>Continue</span>
                    </button><br>
                    <a class="light-link" href="#" @click="skipInviteForm">Skip this for now.</a>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      newUser: {
        email: '',
        access_leads: 1,
        access_proposals: 1,
        access_invoices: 1,
        access_projects: 1
      },
      users_invited: 0,
      invites: [],
      show_invites: false,
      adding_team_member: false
    }
  },
  computed: mapState({
    appLoading: state => state.appLoading,
    user: state => state.user
  }),
  methods: {
    submitInviteForm: function(e) {

      e.preventDefault()

      this.$validator.validateAll()

      if (!this.errors.any()) {
        //There are no errors, move forward...

        //Add the team member to the database...

        //Grab the authorized user
        const authUser = JSON.parse(window.localStorage.getItem('authUser'))

        //Create the payload...
        var newTeamMember = this.newUser

        //Were adding a team member now so show the loader!
        this.adding_team_member = true

        //Create the new company and add the owner...
        this.$http.post('/api/team',
        {
          newTeamMember: JSON.stringify(newTeamMember)
        },
        {
          headers: {
            Authorization: 'Bearer ' + authUser.access_token
          }
        }).then((response) => {
          if(response.status === 200) {
            //Assign the user to a variable
            var invitedUser = response.body

            //Add the user to the list of invited users
            this.invites.push({email: invitedUser.email })

            //Show the invite list...
            this.show_invites = true

            //Jump to top
            location.hash = '#setup-team-top'

            //reset the new user
            this.newUser.email = ''
            this.newUser.access_leads = 1
            this.newUser.access_proposals = 1
            this.newUser.access_invoices = 1
            this.newUser.access_projects = 1

            //Were done adding a team member so hide the loader!
            this.adding_team_member = false

            //Clear the validation errors
            this.errors.clear()

          }
        }).catch(function(error){
            console.log(error);
        })

      }
    },
    skipInviteForm: function(e) {
      e.preventDefault()
      alert('skip invite!')
    }
  }
}
</script>

现在让我们组建你的团队。
您的计划最多允许{{this.user.company.max_users}}个用户。在我们将您发送到仪表板之前，您是否希望发出一些团队邀请

您最多可以再邀请4名团队成员



你邀请了{{invite.email}。


团队成员的电子邮件*
{{errors.first（'email'）}
接触线索和联系人*
他们可以看到他们创建的潜在客户和联系人
他们可以看到所有的线索和联系人
无法访问潜在客户和联系人
{{errors.first（'access_leads'）}
获得提案*
他们可以看到他们提出的建议
他们可以看到所有的提案
无法获取提案
{{errors.first（'access_propositions'）}
获取发票*
他们可以看到他们创建的发票
他们可以看到所有的发票
无法访问发票
{{errors.first（'access_invoices'）}
获得项目*
他们可以看到自己创建的项目
他们可以看到所有的项目
无法访问项目
{{errors.first（'access_projects'）}
发送邀请
持续


从“vuex”导入{mapState}
导出默认值{
数据（）{
返回{
新用户：{
电子邮件：“”，
访问线索：1，
访问建议：1，
访问发票：1，
访问大学项目：1
},
邀请的用户：0，
邀请：[]，
show_邀请：false，
正在添加团队成员：false
}
},
计算：mapState({
appLoading:state=>state.appLoading，
用户：state=>state.user
}),
方法：{
submitInviteForm:函数（e）{
e、 预防默认值（）
这是。$validator.validateAll（）
如果（！this.errors.any（））{
//没有错误，请继续。。。
//将团队成员添加到数据库。。。
//抓取授权用户
const authUser=JSON.parse（window.localStorage.getItem（'authUser'））
//创建有效负载。。。
var newTeamMember=this.newUser
//我们现在正在添加一个团队成员，所以显示加载程序！
this.adding\u team\u member=true
//创建新公司并添加所有者。。。
这是.$http.post（'/api/team'，
{
newTeamMember:JSON.stringify（newTeamMember）
},
{
标题：{
授权：“承载人”+authUser.access\u令牌
}
})。然后（（响应）=>{
如果（response.status==200）{
//将用户分配给变量
var invitedUser=response.body
//将用户添加到受邀请用户列表中
this.invites.push（{email:invitedUser.email}）
//显示邀请列表。。。
this.show\u=true
//跳到顶端
location.hash=“#设置团队顶部”
//重置新用户
this.newUser.email=''
this.newUser.access\u leads=1
this.newUser.access\u提案=1
this.newUser.access\u发票=1
this.newUser.access\u projects=1
//我们添加了一个团队成员，所以隐藏加载程序！
this.adding\u team\u member=false
//清除验证错误
this.errors.clear（）
}
}).catch（函数（错误）{
console.log（错误）；
})
}
},
skipInviteForm:函数（e）{
e、 预防默认值（）
警报（'跳过邀请！'）
}
}
}

试着看一下从中提取的信息。 基本上，您必须调用

this.$validator.clean（）重置表单的输入字段后