Vue.js教程：正确在Methods中访问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>
// 假设这是Vue Options API组件结构
export default {
  // 注意：这里缺少了data选项来定义userEmail
  methods: {
    resetPassword() {
      // 错误：在这里重新声明了一个局部变量userEmail
      // 无论模板中v-model如何更新，这个局部的userEmail始终是初始值
      const userEmail = ref(''); // 如果是Vue 3的Composition API，这里会是ref('')
                                 // 如果是Options API，可能直接是 const userEmail = '';

      // 尝试打印 userEmail 的值，会发现它是空字符串或ref对象，而不是用户输入的内容
      console.log('尝试获取的邮箱:', userEmail.value || userEmail); 

      // auth.sendPasswordResetEmail(userEmail.value).catch((error) => {
      //     console.log(error);
      // });
      alert('Reset email has been sent');
    },
  },
};
</script>

<template>
  <!-- v-if="reset" 控制表单的显示状态，假设在data中定义 -->
  <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相关模块，假设你正在使用Firebase
import { getAuth, sendPasswordResetEmail } from 'firebase/auth'; 
import app from '../firebaseConfig'; // 假设你的Firebase app实例在这里配置

export default {
  data() {
    return {
      userEmail: '', // 1. 在data中声明并初始化userEmail，作为v-model的绑定目标
      reset: true,   // 假设有一个状态来控制表单的显示
    };
  },
  methods: {
    resetPassword() {
      // 2. 通过this访问v-model绑定的userEmail数据
      const email = this.userEmail; 

      // 简单的客户端验证
      if (!email) {
        alert('请输入邮箱地址！');
        return;
      }

      const auth = getAuth(app); // 获取Firebase Auth实例，传入你的Firebase app实例

      // 使用获取到的邮箱地址发送密码重置邮件
      sendPasswordResetEmail(auth, email)
        .then(() => {
          alert('重置密码邮件已发送到您的邮箱！请检查您的收件箱。');
          console.log('重置邮件发送成功，邮箱:', email);
          // 成功发送后，可以清空输入框
          this.userEmail = ''; 
          // 也可以将表单隐藏或显示其他信息
          // this.reset = false; 
        })
        .catch((error) => {
          console.error('发送重置邮件失败:', error.message);
          // 根据错误类型给用户更具体的反馈
          let errorMessage = '发送失败，请稍后再试。';
          if (error.code === 'auth/user-not-found') {
            errorMessage = '未找到该邮箱对应的用户。';
          } else if (error.code === 'auth/invalid-email') {
            errorMessage = '邮箱地址格式不正确。';
          }
          alert(`发送失败: ${errorMessage}`);
        });
    },
  },
};
</script>