Javascript 使用Vuelidate在Vue中进行的验证不起作用

嘿，伙计们

我想知道我是不是错过了什么，我花了几个小时想弄明白，但没有想出解决办法

我正在尝试在vue中使用Vuelidate进行表单验证，一切似乎都准备就绪，但在创建自定义警报后，表单仍在进行下一阶段

我这样声明了Vuelidate:

import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

data: () => ({
    v$: useVuelidate(),
    currentStage: 1,
    traffic: {
      unique: '',
      unique1: '',
      unique2: '',
      unique3: '',
      unique4: ''
    },
  }),

validations() {
    return {
      traffic: {
        unique1: { required },
        unique2: { required },
        unique3: { required },
        unique4: { required },
        unique5: { required }
      },
    }
  },

  computed: {

        appendFields() {
          this.v$.$validate()
          if(!this.v$.$error){
            if(this.jsonStatham.hasOwnProperty(this.traffic.unique1)){
              this.integrationParams.push(...Object.keys(this.jsonStatham[this.traffic.unique1]))
            }
          } else {
            alert("Error, Not all fields are filled in.")
          }
        }
      },

<button @click="buttonClicked(0); appendFields;">Next Stage</button>

内部数据（）我做了如下操作：

import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

data: () => ({
    v$: useVuelidate(),
    currentStage: 1,
    traffic: {
      unique: '',
      unique1: '',
      unique2: '',
      unique3: '',
      unique4: ''
    },
  }),

validations() {
    return {
      traffic: {
        unique1: { required },
        unique2: { required },
        unique3: { required },
        unique4: { required },
        unique5: { required }
      },
    }
  },

  computed: {

        appendFields() {
          this.v$.$validate()
          if(!this.v$.$error){
            if(this.jsonStatham.hasOwnProperty(this.traffic.unique1)){
              this.integrationParams.push(...Object.keys(this.jsonStatham[this.traffic.unique1]))
            }
          } else {
            alert("Error, Not all fields are filled in.")
          }
        }
      },

<button @click="buttonClicked(0); appendFields;">Next Stage</button>

在data（）之外声明验证，如下所示：

import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

data: () => ({
    v$: useVuelidate(),
    currentStage: 1,
    traffic: {
      unique: '',
      unique1: '',
      unique2: '',
      unique3: '',
      unique4: ''
    },
  }),

validations() {
    return {
      traffic: {
        unique1: { required },
        unique2: { required },
        unique3: { required },
        unique4: { required },
        unique5: { required }
      },
    }
  },

  computed: {

        appendFields() {
          this.v$.$validate()
          if(!this.v$.$error){
            if(this.jsonStatham.hasOwnProperty(this.traffic.unique1)){
              this.integrationParams.push(...Object.keys(this.jsonStatham[this.traffic.unique1]))
            }
          } else {
            alert("Error, Not all fields are filled in.")
          }
        }
      },

<button @click="buttonClicked(0); appendFields;">Next Stage</button>

最后一件事是computed，我有一个函数在表单的第3阶段创建输入字段：

import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

data: () => ({
    v$: useVuelidate(),
    currentStage: 1,
    traffic: {
      unique: '',
      unique1: '',
      unique2: '',
      unique3: '',
      unique4: ''
    },
  }),

validations() {
    return {
      traffic: {
        unique1: { required },
        unique2: { required },
        unique3: { required },
        unique4: { required },
        unique5: { required }
      },
    }
  },

  computed: {

        appendFields() {
          this.v$.$validate()
          if(!this.v$.$error){
            if(this.jsonStatham.hasOwnProperty(this.traffic.unique1)){
              this.integrationParams.push(...Object.keys(this.jsonStatham[this.traffic.unique1]))
            }
          } else {
            alert("Error, Not all fields are filled in.")
          }
        }
      },

<button @click="buttonClicked(0); appendFields;">Next Stage</button>

所以问题是，当appendFields（）被调用时，我确实收到了这样一个警报：警报（“错误，并不是所有字段都被填充。”） 但在我按下警报中的“ok”后，表单仍将进入下一阶段。 我错过了什么

编辑： 这是执行“appendFields”方法的按钮：

import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

data: () => ({
    v$: useVuelidate(),
    currentStage: 1,
    traffic: {
      unique: '',
      unique1: '',
      unique2: '',
      unique3: '',
      unique4: ''
    },
  }),

validations() {
    return {
      traffic: {
        unique1: { required },
        unique2: { required },
        unique3: { required },
        unique4: { required },
        unique5: { required }
      },
    }
  },

  computed: {

        appendFields() {
          this.v$.$validate()
          if(!this.v$.$error){
            if(this.jsonStatham.hasOwnProperty(this.traffic.unique1)){
              this.integrationParams.push(...Object.keys(this.jsonStatham[this.traffic.unique1]))
            }
          } else {
            alert("Error, Not all fields are filled in.")
          }
        }
      },

<button @click="buttonClicked(0); appendFields;">Next Stage</button>

---

单击

-处理程序更新

currentStage

，而不首先验证表单。但是，验证发生在

appendFields

中，它是在

按钮单击（）之后计算的。验证应该是第一步，这可能会阻碍后续步骤

我会像这样重构它：

使
appendFields
成为组件
方法
，因为它实际上不是一个计算属性（特别是因为它不返回任何内容）


为清晰起见，将
currentStage
更新移到其自身的功能中


将表单验证从
appendFields（）
移动到按钮的
单击
-处理程序


在
单击
-处理程序中，如果表单有效，则调用步骤1和2中创建的函数


导出默认值{
方法：{
// 1️⃣
appendFields（）{
if（this.jsonStatham.hasOwnProperty（this.traffic.unique1））{
this.integrationParams.push（…Object.keys（this.jsonStatham[this.traffic.unique1]））
}
},
// 2️⃣
更新状态（值）{
如果（值==0）{
这是当前阶段++
}else if（值===1）{
这是当前阶段--
}
},
按钮点击（值）{
// 3️⃣
此.v$.$validate（）
如果（！this.v$.$错误）{
// 4️⃣
这是appendFields（）
this.updateStage（值）
}否则{
警报（“错误，并非所有字段都已填写。”）
}
}
}
}

还要注意，因此应该在
setup（）中调用它：

导出默认值{
设置（）{
返回{
v$：useValidate（）
}
}
}