Question

我使用firebase进行用户身份验证。我有一个用户可以登录的表单。有一个select输入和不同的options。用户选择一个option并输入正确的password并登录。我需要找到在select输入中选择的当前用户，因此可以在{ {1}}方法-要精确：onSignIn()。

这在某种程度上可行，但是当我在实际的this.$store.dispatch('signUserIn', { //CURRENT email: this.chosenUser.email, password: this.password})连接项目中单击Log in时，出现错误：firebase我以为signInWithEmailAndPassword failed: First argument "email" must be a valid string.是一个字符串。我该如何解决？

这里有demo。

登录组件：

this.chosenUser.email

Store.js：

<template>
  <section class="signin">
    <div class="login">
      <h1>Log in</h1>
      <form>
        <select v-model="chosenUser">
          <option v-for="user in users">{{ user.login }}</option>
        </select>
        <input type="password" v-model="password" id="password" placeholder="Password">
        <input type="button" @click="onSignIn" value="Login">
      </form>
    </div>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      chosenUser: "",
      password: ""
    };
  },
  methods: {
    onSignIn() {
      this.$store.dispatch("signUserIn", {
        email: this.user.email,
        password: this.password
      });
    }
  },
  computed: {
    ...mapGetters(["users", "user"])
  }
};
</script>

Answer 1

您应绑定值以选择：

<select v-model="chosenUser">
  <option v-for="user in users" :value="user">{{ user.login }}</option>
</select>

如果您不绑定值，则默认值将等于选项的text

默认数据应为对象

data() {
    return {
      chosenUser: { login: "London", email: "london@gmail.com" },
      password: ""
    };
}

在方法中：

 methods: {
    onSignIn() {
      this.$store.dispatch("signUserIn", {
        email: this.chosenUser.email,
        password: this.password
      });
    }
  }

根据选择的输入获取用户的电子邮件

1 个答案: