这一节按照老师的方法，进行验证码错误校验，发现未生效。vee-validate版本3.1.1

下次提问基本的几项：

1. 源代码

2. 错误截图

3. 本地环境

4. 预期效果

5. 实践过程

如果是要设置到验证码的错误部分，其实上面的同学有提到方法，参考：https://codesandbox.io/s/h7uzd

代码如下：

  <validation-observer ref="observer" v-slot="{ validate }">
                <form method="post">
                  <div class="layui-form-item">
                    <label for="username" class="layui-form-label">用户名</label>
                    <validation-provider name="username" rules="required|email" v-slot="{ errors }">
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="username"
                          v-model="username"
                          placeholder="请输入邮箱"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <span class="error layui-form-mid">{{ errors[0] }}</span>
                    </validation-provider>
                  </div>

                  <div class="layui-form-item">
                    <label for="password" class="layui-form-label">密码</label>
                    <validation-provider name="password" rules="required|min:6" v-slot="{ errors }">
                      <div class="layui-input-inline">
                        <input
                          type="password"
                          name="password"
                          v-model="password"
                          placeholder="请输入密码"
                          class="layui-input"
                        />
                      </div>
                      <span class="error layui-form-mid">{{ errors[0] }}</span>
                    </validation-provider>
                  </div>

                  <div class="layui-form-item">
                    <label for="verificationCode" class="layui-form-label">验证码</label>
                    <validation-provider
                      name="verificationCode"
                      rules="required|length:4"
                      v-slot="{ errors }"
                    >
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="verificationCode"
                          ref="codefield"
                          v-model="verificationCode"
                          placeholder="请输入验证码"
                          autocomplete="off"
                          class="layui-input"
                        />
                        <span class="error">{{ errors[0] }}</span>
                      </div>
                      <div class="layui-form-mid svg" v-html="svgCaptcha" @click="getCaptcha"></div>
                    </validation-provider>
                  </div>

                  <div class="layui-form-item">
                    <!-- 校验失败不会调用then方法 -->
                    <button class="layui-btn" type="button" @click="validate().then(doLogin)">
                      立即登录
                    </button>
                    <span style="padding-left:20px;">
                      <router-link :to="{ name: 'forget' }">忘记密码?</router-link>
                    </span>
                  </div>
                  <div class="layui-form-item fly-form-app">
                    <span>或者使用社交账号登入</span>
                    <a
                      href
                      onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-qq"
                      title="QQ登入"
                    ></a>
                    <a
                      href
                      onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-weibo"
                      title="微博登入"
                    ></a>
                  </div>
                </form>
              </validation-observer>

发现采用`validation-observer ref="observer"`中的ref进行设置，也可生效：

 this.$refs.observer.setErrors({
    verificationCode: [msg]
});