个人中心
gpt4 book ai didi

javascript - 无法将数据从 firebase.auth 签名到我的数据变量

转载 作者：行者123 更新时间：2023-12-03 03:47:18 27 4
gpt4 key购买 nike

将用户数据从 firebase auth 分配给我的本地变量时遇到问题。在 Vue 实例中，已“创建”生命周期 Hook ，我调用 firebase auth 函数来获取身份验证状态，并且在该函数调用中，我想分配用户数据到我的 fireUser 变量。我在它后面抛出 console.log ，它打印正确，但如果我想在页面上显示它，它是空白的(空)。我认为这与 promise 有关，但不能放在一起。预先感谢您的帮助。

  let storage = firebase.initializeApp(config);
  let db = storage.database();
  let usersRef = db.ref('users');








//Vue instance

var app = new Vue({
  el: '#app',
  firebase:{
      userDb:usersRef
  },
  data: {
    person:{
      email:'',
      password:''
    },
    user:{
      name:'',
      description:'',
      photourl:'',
      learningjournal:''
    },
    users:[],
    fireUser:''


  },
  methods:{
    //Posting data to Firebase
    submit(){
      usersRef.push(this.user);
      this.user = '';
    },
    register(){
      firebase.auth().createUserWithEmailAndPassword(this.person.email, this.person.password).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });

      this.person= '';
    },
    login(){
      firebase.auth().signInWithEmailAndPassword(this.person.email, this.person.password).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });


    },
    logOut(){
      firebase.auth().signOut().then(function() {
          // Sign-out successful.
          console.log('logout');
        }).catch(function(error) {
          // An error happened.
        });
    }
  },
  created(){
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        this.fireUser = user;
        console.log(user);
        console.log('user',this.fireUser);

      } else {
        // No user is signed in.
      }
    });
  }


});
<html>
  <head>
    <title>SEPCO: Elium September Cohort Page</title>
    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  </head>
  <body>
    <div class="pimg">
      <div class="ui two column centered grid">
        <h1 class="ui column inverted black center aligned header"><i class="fa fa-graduation-cap" aria-hidden="true"></i>SEPCO <br> <hr> <em>Elium September Cohort Page</em></h1>
      </div>
    </div>
    <div class='ui container'>
      <br>
    <br> <br>

    <h2 class="ui olive inverted segment center aligned header">Welcome</h2>
    <p id='introduction'>This is the collaborative page of the Elium September cohort. This is the beginning of a collaborative document and it <b>urgently needs your input!</b> So please go into the code, and make this page prettier, smarter, more content rich and of course more JavaScript-enriched.</p>
    <i>Our clan name on codewars.com: SEPCO</i>
   <div id='countdown'>
 <!-- who wants to code up a count-down to the startdate of the bootcamp?? -->
    </div>
    <div class="ui grid">
      <div class="sixteen wide tablet eight wide computer column">
        <h2 class="ui olive inverted segment center aligned header"> Basics of how we want to prepare together.</h2>
        <ol class="ui list">
          <li> Meet, decide on milestones togehter, then share how far you got e.g. using polls in Slack (for example "Did everyone finish watchandcode.com course?")</li>
          <li> Scheduled hangout time for 2 hours everyday where people will be online working/studying which is non-mandatory. (doodle invite #1)
            <ol>
              <li><a href="https://doodle.com/poll/cz8igzmkew2vabfh" target="_blank">Click here to post availability to hangout</a></li>
            </ol>
          </li>
          <li>
             A Code Wars problem once a week every Friday starting Sept 28th. (doodle invite #2) answer will be on plunkr
            <ol>
              <li><a href="https://doodle.com/poll/k6kg6tk7ce4ipmnq" target="_blank">Click here to post time availability for Code Wars problem</a></li>
            </ol>
          </li>
          <li> Share your plunker/codepen/glitch sites! There's two ways how we recommend doing this:
            <ol>
              <li> We will use  these codesharing-site accounts to share to the group what we have learned ( Share fun projects! And Code wars problems after completion)</li>
              <li> Make a learning journal where you write down what you learned and what your personal goals are, this is also the ideal place to link to any other plunker/codepen/glitch creation you've made. The URL to this learning journal should be put into your object (see Part 3. below)</li>
            </ol>
          </li>
          <li> HTML and CSS discussed more in 2 weeks (because this can be learned towards the end)</li>
        </ol>
      </div>
      <div class="sixteen wide tablet eight wide computer column">
        <h2 class="ui olive inverted segment  center aligned header">Shared Milestones</h2>
        <p class="ui center aligned header">We want to get the following done by September 10th.</p>
          <ul id="meetingPoints">
            <li class="ui padded segment"> <strong>DECIDED:</strong>  Complete practical javascript ("PJS") on watchandcode</li>
            <li class="ui padded segment"> <strong>PROPOSED:</strong> Additional JavaScript (define list of skills/concepts)</li>
            <li class="ui padded segment"> <strong>REVISIT:</strong> first week of August: Basic HTML</li>
            <li class="ui padded segment"> <strong>REVISIT:</strong> first week of August: Basic CSS</li>
            <li class="ui padded segment"> <strong>REVISIT:</strong> first week of August: GIT</li>
        </ul>
      </div>
    </div>






 <br>
      <h2 class="ui olive inverted segment center aligned header"> Info on the cohort members & links to their learning journals on plunker </h2>
      <p>The cohort is an array and every member is an object. Dive into the sourcecode and add an object with your details. And then we asap need someone who makes this section better/prettier (see sourcecode)</p>
     <br> <br>

    <!-- loop and create Info card Using Vue.js -->
     <div id="app"> <!--Starting vue instance here-->
       <div class="ui form">
         <div class="fields">
           <div class="field">
             <label>Email</label>
             <input type="text" placeholder="Email" v-model='person.email'>
           </div>
           <div class="field">
             <label>Password</label>
             <input type="password" v-model='person.password'>
           </div>
         </div>
         <button class="ui blue button" @click.prevent="register">Submit</button>
         <br>
         <div class="ui form">
           <div class="fields">
             <div class="field">
               <label>Email</label>
               <input type="text" placeholder="Email" v-model='person.email'>
             </div>
             <div class="field">
               <label>Password</label>
               <input type="password" v-model='person.password'>
             </div>
           </div>
           <button class="ui blue button" @click.prevent="login">Submit</button>
           <br>
           <hr>
           <!-- I want to print User loged in result here -->
           <p>{{fireUser}}</p>
           <hr>
           <br>

       </div>
       <br>
       <div class="ui grid">
         <div class="ui four wide column" v-for="people in userDb">
          <div class="ui card">
            <div class="image">
              <img :src="people.photourl">
            </div>
            <div class="content">
              <div class="header">{{people.name}}</div>
              <div class="description">
                <p>{{people.description}}</p>
              </div>
              <br>
              <div class="extra content">
                <span class="left floated">
                  <i class="arrow down icon"></i>
                  <a :href="people.learningjournal">Plunker</a>
                </span>
              </div>
            </div>
          </div>
        </div>
       </div>

     <br><br><br>
     <!-- Form for making users cards -->

     <form class="ui form">
       <div class="field">
         <label>First/Last-Name:</label>
         <input type="text" v-model="user.name"  placeholder="First/Last Name">
       </div>
       <div class="field">
          <label>Description of You:</label>
          <textarea v-model="user.description"></textarea>
       </div>
       <div class="field">
         <label>Picture Url:</label>
         <input type="text" v-model="user.photourl"  placeholder="Picture Url">
       </div>
       <div class="field">
         <label>Plunker Url:</label>
         <input type="text" v-model="user.learningjournal" placeholder="Plunker Url">
       </div>
       <button class="ui olive  button" @click.prevent="submit">Submit</button>
     </form
     <br>
    <button class="ui button" @click.prevent='logOut'>click me</button>

     <br>
  </div> <!--end of vue instance-->
<div id="footer"><hr></div>

    <!-- Your web-app is https, so your scripts need to be too -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"
            integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.1.5/firebase.js"></script>
    <script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
    <script src="client.js"></script>
  </div>

  </body>
</html>

最佳答案

回调中的 this 变量并不引用 Vue 实例。

您需要在回调之外设置对 Vue 实例的引用，然后在设置响应中的数据时使用该引用:

created(){
  let self = this;
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      self.fireUser = user;
...

关于javascript - 无法将数据从 firebase.auth 签名到我的数据变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45330808/

27 4 0
文章推荐： javascript - 关闭 ng-href - 下载文件后十字按钮或自动关闭
文章推荐： javascript - 使用 jQuery 滚动 anchor
文章推荐： javascript - 为什么我的按钮无法播放声音并转到链接？
文章推荐： javascript - Rails 中 AJAX 请求后重定向到 html 响应
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com