Vue.js 2登录表单输入无效凭证如何展示错误？代码问题排查求助

存在的问题 #

• 1. 模态框关闭时机错误
  你在登录按钮和密码框回车事件中，都将关闭模态框的$emit('close')和提交方法放在了同步执行位置，而onSubmit是异步请求，实际执行逻辑是：触发点击/回车操作后，会立刻关闭模态框，根本不等Firebase登录请求返回结果。等登录失败给error赋值时，模态框已经销毁，自然看不到错误提示。
• 2. 错误内容赋值错误
  catch捕获的error是完整的Error对象，直接赋值给模板变量渲染会显示[object Object]这类不可读内容，需要取错误文本属性error.message。
• 3. 旧错误未清空
  每次提交新的登录请求前没有清空之前的错误提示，会导致用户提交新请求时还残留上一次的错误信息。
• 4. 组件语法结构错误
  你给出的JS代码存在语法问题：data属性结束后多写了一个闭合的}，导致methods被放在组件配置对象外面，运行时会直接报错，方法无法正常调用。

修正方案 #

修改模板的关闭逻辑

把$emit('close')的逻辑移到登录成功的分支里，只有登录成功才关闭模态框，失败时留在当前页面展示错误：

<form>
  <div @click="$emit('close')">
    <span class="close">&#10006;</span>
  </div>
  <h3>Login</h3>
  <div class="form-group">
    <input
      type="email"
      class="form-control"
      placeholder="Email"
      v-model="email"
    />
  </div>
  <div class="form-group">                        
    <input
      type="password"
      class="form-control"
      placeholder="Password"
      v-model="password"
      @keyup.enter="onSubmit"
    />
  </div>
  <div class="modal-footer">
    <slot name="footer">
      <button
        class="btn btn-primary"
        type="button"
        @click.prevent="onSubmit"
      >
        Login
      </button>
      <div v-if="error" class="error">
        {{error}}
      </div>
    </slot>
  </div>                        
</form>

修正组件JS逻辑

修复语法错误，调整错误赋值逻辑，新增登录成功后关闭模态框的逻辑：

export default {
  name: "Login",
  template: "#login",
  data: () => ({
    email: "",
    password: "",
    error: ""
  }),
  methods: {
    async onSubmit() {
      // 提交前先清空旧错误
      this.error = ""
      try {
        const { user } = await firebase
          .auth()
          .signInWithEmailAndPassword(this.email, this.password);
        // 登录成功才关闭模态框
        this.$emit('close')
      } catch (error) { 
        // 取错误文本赋值
        this.error = error.message
        console.log("🤡", error);         
      }
    }
  }
};
</script>

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