当 Vuetiify 表单中存在 email 地址时，我想显示错误消息

Question

假设

我正在使用 Vuetify 创建用户注册表单。 如果在注册时已经存在 email 地址，我想显示错误，如何使用 Vuetify 的textfield实现此功能？ 配置正在加载表单中组件化的 email。 它在组件之间使用 v-model，并使用 setter 和 getter 进行响应式更新。

我们想要达到的目标

如果 email 地址已经存在，我想使用Vuetify v-text-field来显示错误。

代码

Email

UserFormTextFieldEmail

<template>
  <v-row justify="center">
    <v-col cols="12" md="10" sm="10">
      <v-text-field
        v-model="setEmail"
        type="text"
        label="email"
        prepend-icon="mdi-email"
        :rules="rules"
      />
      <p class="caption mb-0" />
    </v-col>
  </v-row>
</template>
<script>
export default {
  props: ['email'],

  data () {
    return {
      rules: [
        v => !!v || '',
        v => /.+@.+\..+/.test(v) || ''
      ]
    }
  },

  computed: {
    setEmail: {
      get () { return this.email },
      set (newVal) { return this.$emit('update:email', newVal) }
    }
  }
}
</script>

形式

  <v-card class="pa-7 ma-10 mx-auto" max-width="600">
      <div class="login-logo">
        <img
          :src="logoImg"
          width="70px"
        >
      </div>
      <v-form
        ref="form"
        v-model="isValid"
      >
        <v-container>
          <UserFormTextFieldUserName :name.sync="userInfo.name" />
          <UserFormTextFieldEmail :email.sync="userInfo.email" :error.sync="errorMessage" /> // email
          <UserFormTextFieldPassword :password.sync="userInfo.password" />
          <v-row justify="center">
            <v-col cols="12" md="10" sm="10">
              <v-btn
                :disabled="!isValid || loading"
                :loading="loading"
                block
                class="white--text"
                color="deep-purple lighten-1"
                @click="signup"
              >
                ・・・
              </v-btn>
            </v-col>
          </v-row>
        </v-container>
      </v-form>
    </v-card>
  </div>
</template>

<script>
import '@/assets/css/user-form.scss'
import logoImg from '~/assets/images/login_logo.png'
export default {
  auth: false,
  data () {
    return {
      isValid: false,
      loading: false,
      logoImg,
      show: false,
      userInfo: {
        name: '',
        email: '',
        password: ''
      },
      errorMessage:''
    }
  },
  methods: {
    signup () {
      this.$axios.post('/api/v1/auth', this.userInfo)
      .then((response) => {
        this.$store.commit('alertSwitchSuccess', true)
        setTimeout(() => {
          this.$store.commit('alertSwitchSuccess', false)
          this.$router.replace(`/user/login`)
        }, 2000)
      })
      .catch((e) => {
      })
    }
  }
}
</script>

Answer 1

我以前想做同样的事情，这是我的解决方案：

methods: {
    checkemail() {
      axios
        .get("/api/v1/auth")
        .then((response) => {
          this.emails = response.data.map((a) => 
          a.email);
        });
    },
},

这个 function 返回一个包含所有电子邮件的数组

  data() {
    return {
      //email input v-model
      email: "",
      //declare the emails array
      emails: [],
      rules: [
        // your rules
        (v) =>
          (v && this.emails.indexOf(this.email)<0)||
          "this email is already existing",
      ],

我希望这会有所帮助