Vue.js 当props 的值改变时如何更新类'

当用户试图登录，但有一个错误，然后我希望输入边框更改为红色.目前我正在传递hasError 到我的输入组件.在输入组件中，我将它定义为prop，我使用watch 函数来查看这个prop的值是否改变，在console.log('Error:', hasError.value);中，值变为true，但边框永远不会变成红色.我使用tailwindCSS来进行造型.

登录表单.VUE:

<script setup>
import Input from "../components/Input.vue";

// Import necessary functions from 'vue' for script setup
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// Create refs for email and password
const updatedEmail = ref("");
const updatedPassword = ref("");
const hasError = ref(false);
const error = ref(null);

// Event handlers to update email and password
const updateEmail = (value) => {
  updatedEmail.value = value;
};

const updatePassword = (value) => {
  updatedPassword.value = value;
};
const login = async () => {
  console.log("Email:", updatedEmail.value);
  console.log("Password:", updatedPassword.value);
  // Add your login logic here
  let apiEndpoint = "http://localhost:3000/api/v1/users/login";

  try {
    // Make a request to your API to check the credentials
    const response = await fetch(apiEndpoint, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: updatedEmail.value,
        password: updatedPassword.value,
      }),
    });
    // Assuming the API returns a JSON object with a 'success' property
    const result = await response.json();

    if (result.status === "success") {
      // Handle successful login, e.g., show a success message or redirect to another screen
      // Save the JWT token in the local storage
      localStorage.setItem("token", result.token);
      console.log("Token:", result.token);
      // Redirect to the orders page
      router.push("/");
    } else {
      // Handle authentication error
      hasError.value = true;
      error.value = "Invalid email or password";
    }
  } catch (e) {
    console.error("Error during login:", e);
    // Handle other errors
    hasError.value = true;
    error.value = "An error occurred during login";
  }
};
</script>

<template>
  <form>
    <Input
      :label="'Email'"
      :type="'text'"
      @input-change="updateEmail"
      :error="hasError"
    ></Input>
    <Input
      :label="'Password'"
      :type="'password'"
      @input-change="updatePassword"
      :error="hasError"
    ></Input>
    <div v-if="error" class="text-secondary-red">{{ error }}</div>
    <a
      href="#"
      class="text-body flex w-full justify-center text-offWhite-light bg-primary-dark rounded-md p-2 mt-8 mb-4 font-bold"
      @click.prevent="login"
      >Login</a
    >
    <div class="flex items-center justify-between">
      <div class="flex-grow h-px bg-black m-2"></div>
      <span class="mx-2 text-sm font-bold">Of</span>
      <div class="flex-grow h-px bg-black m-2"></div>
    </div>
    <div
      class="flex w-full justify-center gap-4 border-2 border-primary-dark rounded-md p-2 mb-4 mt-4"
    >
      <img src="/google-icon.svg" alt="google icon" />
      <a href="#" class="text-body font-bold">Registreer met Google</a>
    </div>
    <div
      class="flex w-full justify-center gap-4 border-2 border-primary-dark rounded-md p-2 mb-4"
    >
      <img src="/fb-icon.svg" alt="fb icon" />
      <a href="#" class="text-body font-bold">Registreer met Facebook</a>
    </div>
  </form>
</template>

<style scoped></style>

Input. vue组件:

<script setup>
import { ref, defineProps, watch, defineEmits } from "vue";

const props = defineProps(["label", "type", "error"]);
const { emit } = defineEmits();

let inputValue = ref("");
let hasError = ref(props.error);

const updateInput = () => {
  emit("input-change", inputValue.value);
};

watch(
  () => props.error,
  (newVal) => {
    hasError.value = newVal;
    console.log("Error:", hasError.value);
  }
);
</script>

<template>
  <div class="input-container mt-8">
    <div class="flex w-[100%] justify-between">
      <label class="text-body font-bold pb-2">{{ label }}</label>
      <a
        href="#"
        class="text-xs underline"
        :class="{ block: type === 'password', hidden: type !== 'password' }"
        >Wachtwoord vergeten?</a
      >
    </div>
    <input
      :type="type"
      :class="{ 'border-red-500': hasError, 'border-2': !hasError }"
      class="w-[100%] p-2 rounded-md focus:border-primary-dark focus:outline-none"
      v-model="inputValue"
      @input="updateInput"
    />
  </div>
</template>

<style scoped></style>

在:class中，我把hasError 改为hasErro.value.我试过了，没有watch.我不知道该怎么办.