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

Question

我使用 firebase 进行用户身份验证。我有一个用户可以登录的表单。有一个带有不同选项的选择输入。用户选择一个选项并输入正确的密码并登录。我需要找到在select输入中选择的当前用户，这样我就可以在 onSignIn() 方法中使用它 - 准确地说: this.$store.dispatch('signUserIn', {//CURRENT email: this.chosenUser.email,密码:this.password}).

这在某种程度上有效，但是当我在实际的 firebase 连接项目中单击Log in 时，出现错误:signInWithEmailAndPassword failed: First argument "email"must be一个有效的字符串。 我认为 this.chosenUser.email 是一个字符串。我该如何修复它？

这是 demo .

登录组件:

<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>

Store.js:

state: {
    users: [
      { login: "London", email: "london@gmail.com" },
      { login: "Paris", email: "paris@gmail.com" }
    ],
    user: null
  },
  actions: {
    signUserIn({ commit }, payload) {
      firebase
        .auth()
        .signInWithEmailAndPassword(payload.email, payload.password)
        .then(user => {
          const newUser = {
            id: user.uid,
            cart: []
          };
          commit("setUser", newUser);
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload;
    }
  },
  getters: {
    users: state => {
      return state.users;
    },
    user: state => {
      return state.user;
    }
  }

Answer 1

您应该将值绑定(bind)到选择:

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

如果不绑定(bind)值，默认值将等于选项的文本

默认数据应该是一个对象

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

在方法中:

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