Vue.js 中正确传递 v-model 数据至方法：以密码重置为例

<!-- 模板部分 -->
<template>
  <form v-if="reset" @submit.prevent="resetPassword">
    <input type="email" required placeholder="email" v-model="userEmail" class="inline-block">
    <button type="submit">Reset Password</button>
  </form>
</template>

<script>
import { ref } from 'vue'; // 假设这里是 Vue 3 Composition API 的 ref 导入，但在此场景下使用方式错误
import { getAuth, sendPasswordResetEmail } from "firebase/auth"; // 假设使用 Firebase Auth

export default {
  data() {
    return {
      reset: true, // 控制表单显示
      // userEmail 应该在这里声明，但为了演示错误，此处暂时不声明
    };
  },
  methods: {
    resetPassword() {
      const auth = getAuth(); // 获取 Firebase Auth 实例
      // 错误：在此处重新声明 userEmail 为一个局部响应式引用
      const userEmail = ref(''); 

      // 尝试使用这个局部变量的值，但它始终是空字符串
      sendPasswordResetEmail(auth, userEmail.value)
        .then(() => {
          alert('重置邮件已发送，请检查您的邮箱。');
          console.log('重置邮件已发送到:', userEmail.value); // 此时 userEmail.value 仍是空
        })
        .catch((error) => {
          console.error("发送重置邮件失败:", error.message);
          alert('发送重置邮件失败: ' + error.message);
        });
    },
  },
};
</script>

<!-- 模板部分与之前相同 -->
<template>
  <form v-if="reset" @submit.prevent="resetPassword">
    <input type="email" required placeholder="email" v-model="userEmail" class="inline-block">
    <button type="submit">Reset Password</button>
  </form>
</template>

<script>
// 假设使用 Firebase Auth
import { getAuth, sendPasswordResetEmail } from "firebase/auth"; 
// 假设 app 已经初始化并作为 Firebase 的应用实例
// import { app } from './firebaseConfig'; // 示例导入 Firebase 应用实例

export default {
  data() {
    return {
      reset: true, // 控制表单显示
      userEmail: '', // **关键：在 data 中声明 userEmail 属性并初始化**
      isLoading: false, // 用于控制加载状态
    };
  },
  methods: {
    async resetPassword() {
      // 1. 输入校验
      if (!this.userEmail) {
        alert('请输入您的邮箱地址。');
        return;
      }

      this.isLoading = true; // 设置加载状态

      try {
        const auth = getAuth(); // 获取 Firebase Auth 实例

        // **关键：通过 this.userEmail 访问 v-model 绑定的数据**
        await sendPasswordResetEmail(auth, this.userEmail);

        alert('重置邮件已发送，请检查您的邮箱。');
        console.log('重置邮件已发送到:', this.userEmail);
        this.userEmail = ''; // 清空输入框
      } catch (error) {
        console.error("发送重置邮件失败:", error.message);
        alert('发送重置邮件失败: ' + error.message);
      } finally {
        this.isLoading = false; // 无论成功失败，都解除加载状态
      }
    },
  },
};
</script>