如何使用 vee-validate 更改 axios 后面的规则答案

【问题标题】：How to change rule in behind catch of the axios using vee-validade如何使用 vee-validate 更改 axios 后面的规则
【发布时间】：2020-04-07 21:10:08
【问题描述】：

我正在使用 Vue vee-validity 库，我正在设法在单击提交按钮之前正常验证字段。

但是我想做点什么，当我点击提交时，就会用数据发表一篇文章。如果有用户错误，我想在输入中告知用户不可用。

如何访问 catch on axios 中的方法来通知给定消息？还是有其他选择？

            <ValidationProvider 
              rules="required|min|max" 
              name="Username" 
              v-slot="{ errors }"
            >
              <b-field
                label="Username"
                :type="{ 'is-danger': errors[0] }"
                :message="errors"
              >
                <b-input v-model="username"></b-input>
              </b-field>
            </ValidationProvider>

     this.axios
      .post(...{ })
      .then(response => {})
      .catch(error => {
        if (error.response.status == 400){ // Invalid username and/or password }
        else if (error.response.status == 409){ // username already exists }
        else if(error.response.status == 500){ // Unknown Error }
    });

【问题讨论】：

标签： vue.js vee-validate

【解决方案1】：

ValidationProvider 有一个 setErrors 方法正是为了这个目的。详情请见docs。

你会做这样的事情：

 <ValidationObserver ref="observer"> ...

 this.axios
  .post(...{ })
  .then(response => {})
  .catch(error => {
    if (error.response.status == 400){ // Invalid username and/or password }
       this.$refs.observer.setErrors({
         Username:['Invalid username and/or password']
       });
    else if (error.response.status == 409){ // username already exists }
    else if(error.response.status == 500){ // Unknown Error }
});

【讨论】：