Vue.js 尝试使用Vuelidate显示错误会阻止暂存表单继续

我正在尝试使用Vuelidate实现分阶段表单验证，但遇到了一个问题。 当我试图添加一个span来表示错误时，表单停止工作。我是什么意思

我使用此按钮从第1阶段进入第2阶段（第2阶段-验证开始）：

我有这个跨度来表示一个错误：

<span class="redStar" v-if="v$.traffic.affiliate.$errors[0]">{{ v$.traffic.affiliate.$errors[0].$message }}</span>

此函数用于检查验证是否良好：

validationCheck: function (e) {
      e.preventDefault()
      this.v$.$touch();
      if (this.v$.$error){
        //alert("Not working");
        return
      } else {
        this.updateStage(1)
        this.appendFields()
      }

在我添加了跨度之后，除了第一个阶段，我不能继续进行任何操作，如果我删除代码的跨度，那么表单工作正常 我该怎么办？

编辑-流量内部数据（）：

---

跨度不应影响其工作方式，请检查错误。为什么你希望

流量
属性存在？我在控制台中没有看到任何错误，流量是在“数据”中定义的。我将把它添加到代码中。如果你能在聊天中帮助我，那将非常有帮助，我真的被卡住了
<span class="redStar" v-if="v$.traffic.affiliate.$errors[0]">{{ v$.traffic.affiliate.$errors[0].$message }}</span>

validations() {
    return {
      one: { required },
      two: { required },
      affiliate: { required },
      country: { required },
      five: { required }
    }
  },

validationCheck: function (e) {
      e.preventDefault()
      this.v$.$touch();
      if (this.v$.$error){
        //alert("Not working");
        return
      } else {
        this.updateStage(1)
        this.appendFields()
      }

 traffic: {
      one: '',
      two: '',
      affiliate: '',
      country: '',
      five: ''
    },