User bearbeiten anzeige fix

express-server/public/javascripts/user.js

@@ -9,18 +9,14 @@ var config = {
 };
 firebase.initializeApp(config);
 
-var fireuser;
-
-
 var vue = new Vue({
     el: '#vue-app',
     prop: {
-        name: ''
+        name: '',
+        getpic: ''
     },
-    data() {
-        return {
+    data: {
             dataPic: ''
-        }
     },
     methods: {
         updateUser(){
@@ -28,23 +24,24 @@ var vue = new Vue({
         },
         getPicUrl(){
             return this.picUrl;
+        },
+        getUser(uid){
+            axios.get('/getUser/' + uid).then(result => {
+                name = result.data[0].name;
+                this.dataPic = result.data[0].picture + "";
+                console.log("Created: ", this.dataPic, name)
+            }).catch(err => console.error(err));
         }
     },
-    beforeCreate() {
-        firebase.auth().onAuthStateChanged(function(user) {
+    created() {
+        firebase.auth().onAuthStateChanged(user => {
             if (user) {
-                fireuser = user;
                 //GetUser
-                axios.get('/getUser/' + fireuser.uid).then(result => {
-                name = result.data[0].name;
-                dataPic = result.data[0].picture + "";
-                console.log("DataPic: ", dataPic)
-            }).catch(err => console.error(err));
+                this.getUser(user.uid);
             } else {
               window.location("/");
-              this.dataPic = "error"
             }
           });
           
-    },
+    }
 });

express-server/views/user.ejs

@@ -7,7 +7,8 @@
 <!-- production version, optimized for size and speed -->
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
+<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
 <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
@@ -26,10 +27,8 @@
           color: #fff;
         }
         </style>
-
-        {{dataPic}}
     <div class="demo-card-image mdl-card mdl-shadow--2dp">
-        <img v-bind:src="dataPic" width="100%"/>
+        <img v-bind:src="this.dataPic" width="100%"/>
         <div class="mdl-card__title mdl-card--expand"></div>
         <div class="mdl-card__actions">
                 <label for="nameinput">Name: </label><input type="text" id="nameinput" v-model="name">