ResetPassword.vue

<template>
  <div class="resetPassword">
    <div
        id="emailField"
        class="m-6"
        :class="{ error: v$.email.$errors.length }">
      <div class="mb-6">
        <label
            for="email"
            class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
        >E-post</label
        >
        <input
            type="email"
            id="email"
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            placeholder="eksempel@eksempel.no"
            v-model="v$.email.$model"
            required
        />
        <!-- error message -->
        <div v-for="(error, index) of v$.email.$errors" :key="index">
          <div
              class="text-red-600 text-sm"
              v-show="showError"
              id="emailErrorId"
          >
            {{ error.$message }}
          </div>
        </div>
      </div>
    </div>
    <button
        @click="sendHome"
        class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
    >
      Send e-post
    </button>
  </div>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { required, email, helpers } from "@vuelidate/validators";
export default {
  name: "ResetPassword.vue",

  data() {
    return {
      showError: false,
      email: "",
    };
  },
  setup() {
    return { v$: useVuelidate() };
  },
  validations() {
    return {
        email: {
          required,
          email: helpers.withMessage(`E-posten er ugyldig`, email),
        },
    };
  },
  methods: {
    sendHome(){
      this.showError = true;

      this.v$.email.$touch();

      if (this.v$.email.$invalid) {
        console.log("Ugyldig, avslutter...");
        return;
      }
      else{this.$router.push('/');}

    }
  },
  validate() {
    this.$refs.form.validate();
  },
};
</script>