Vue中如何将输入框v-model绑定的邮箱值传递给重置密码方法？

错误原因 #

你在resetPassword方法内部重新声明了局部变量userEmail = ref('')，这个变量和模板中v-model绑定的userEmail不是同一个引用，导致方法里拿到的永远是空字符串，自然无法正确传值。另外原代码不管请求成功失败都会弹出成功提示，这会误导用户，需要同步修正。

修正方案 #

情况1：Vue3 <script setup> 语法 #

import { ref } from 'vue'
import app from './你的firebase路径' // 替换成实际引入路径

const reset = ref(true)
// 将userEmail声明为组件级响应式变量，和模板绑定
const userEmail = ref('')

const resetPassword = () => {
  const auth = app.auth()
  // 直接使用组件级的userEmail.value
  auth.sendPasswordResetEmail(userEmail.value)
    .then(() => {
      alert('重置邮件已发送，请查收')
    })
    .catch((error) => {
      console.error('发送失败：', error)
      alert('发送失败：' + error.message)
    })
}

情况2：Vue3/Vue2 Options API 语法 #

import app from './你的firebase路径'

export default {
  data() {
    return {
      reset: true,
      // 在data中声明响应式变量userEmail
      userEmail: ''
    }
  },
  methods: {
    resetPassword() {
      const auth = app.auth()
      // 通过this.userEmail获取输入值
      auth.sendPasswordResetEmail(this.userEmail)
        .then(() => {
          alert('重置邮件已发送，请查收')
        })
        .catch((error) => {
          console.error('发送失败：', error)
          alert('发送失败：' + error.message)
        })
    }
  }
}

模板代码保持不变 #

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

内容的提问来源于stack exchange，提问作者Epimetheus14