如何通过传入函数创建表单验证规则，解决Vuetify自定义校验函数未定义报错

该问题可以完全修复，现有代码存在3处核心逻辑错误，逐一修正即可：

错误原因 #

• 1. 作用域错误导致checkID未定义：在data的rules配置中调用方法必须加this.前缀，且data初始化时methods尚未挂载，直接写死在data里的规则会拿不到方法引用。
• 2. checkID返回值逻辑错误：forEach的内部return不会传递给外层函数，最终checkID永远返回undefined，验证规则永远不生效。
• 3. 数组赋值逻辑错误：GET请求回调里直接把this.idQuestoes赋值为单个id，会导致数组最终仅保留最后一条数据，而非所有id的集合。

修复后完整代码 #

<template>
  <v-form v-model="valid" ref="form" >
          <v-text-field v-model="id" :rules="[...rules.required, ...rules.repeatedID]"/>
  </v-form>
</template>

<script>
import axios from 'axios';
export default {
  data() {    
    return{
       id: '',
       valid: false,
       idQuestoes: [], // 从GET请求获取数据填充的数组
       rules: {
          required: [(v) => !!v || "Field is required"],
          // 调用方法加this前缀指定作用域
          repeatedID: [v => this.checkID(v) || "ID already exists"],
       }
    }
  },
  created() { 
    // 从数据库拉取数据填充数组
    axios.get(`http://localhost:8001/question`)
      .then((response)=>{
        // 直接映射所有id赋值给数组，避免循环push的冗余操作
        this.idQuestoes = response.data.map(obj => obj.id)
      },(error) =>{
          console.log(error);
    });
  },
  methods: {
    checkID(item){
      // 用includes直接判断ID是否存在，存在返回false触发错误提示，不存在返回true验证通过
      return !this.idQuestoes.includes(item)
    }
   }
}
</script>

可选优化点 #

• 可以在GET请求未完成前给表单加loading状态，避免用户在id列表加载完成前输入导致验证不准
• 如果id列表数据量很大，可以把验证逻辑改成后端接口实时校验，避免前端存大量id占用内存

内容的提问来源于stack exchange，提问作者John Mulaney