vue.js - 使用 Vuelidate，如果用户输入的内容已经存在于数据库中，如何生成错误？

Question

我正在使用 Vue JS，更具体地说是 Vuetify 框架创建一个表单。

我已经创建了一种在项目不存在时显示错误的方法，但是如果用户输入的内容已经存在于数据库中，我怎样才能使它也显示错误？

    data: () => ({
        aRule: [
            v => !! v || 'Please provide project type',
        ],
    }),

我的表单组件如下所示：

    <v-text-field
        :rules="aRule"
        label="Project Type"
        v-model="choice.data"
    >
    </v-text-field>

请注意，“choice.data”代表数据库中的数据列

标签： vue.jsvuetify.jsvuelidate

Answer 1

规则应该是这样的

emailRules = [
    v: => !!v || "email address is required",
    v: => /.+@.+\..+/.test(v) || "Please input a valid email",
    v: => (v && this.doesUserExist != true) || "Email already exists.",
  ];

初始化dosUserExist = null; 设置 this.doesUserExist = true; ，当服务器响应用户已经存在时。