title: How to add new data to existing user in Vue.js and Firebase
body: <p>I am attempting to configure a Vue.js app to add additional data to an already-created user in Firebase. I have set up SignUp.vue to set initial input, including the email, password, and name using:</p>
  
  <pre><code>ref.set({
    name: this.name,
    email: this.email,
    user_id: cred.user.uid
  })
  </code></pre>
  
  <p>In Home.vue, I included an input field with the following method to add the input to the currently-logged in user in the database:</p>
  
  <pre><code>async addInput () {
      let ref = await db.collection('users')
      ref.where('user_id', '==', firebase.auth().currentUser.uid).add({
          newInput: this.newInput
      })
  }
  </code></pre>
  
  <p>However, this still did not work. Any recommendations on how to add input to an existing user?</p>
  
  <p>See full code below:</p>
  
  <p>SignUp.vue</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class="sign-up"&gt;
          &lt;p&gt;Let's create a new account!&lt;/p&gt;
          &lt;input type="text" v-model="email" placeholder="Email" /&gt;
          &lt;br /&gt;
          &lt;input type="password" v-model="password" placeholder="Password" /&gt;
          &lt;br /&gt;
          &lt;input type="text" v-model="name" placeholder="Name" /&gt;
          &lt;br /&gt;
          &lt;v-btn @click="signUp" color="info"&gt;Sign Up&lt;/v-btn&gt;
          &lt;span&gt;
              or go back to
              &lt;router-link to="/login"&gt;login&lt;/router-link&gt;.
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import slugify from "slugify";
  import firebase from "firebase";
  import db from "@/firebase/init";
  export default {
      name: "signUp",
      data() {
          return {
              email: "",
              password: "",
              name: ""
          };
      },
      methods: {
          signUp() {
              if (this.name &amp;&amp; this.email &amp;&amp; this.password) {
                  this.slug = slugify(this.name, {
                      replacement: "-",
                      remove: /[$*_+~,()'"!\-:@]/g,
                      lower: true
                  });
                  let ref = db.collection("users").doc(this.slug);
                  ref.get().then(doc =&gt; {
                      if (doc.exists) {
                          this.feedback = "This alias already exists";
                      } else {
                          firebase
                              .auth()
                              .createUserWithEmailAndPassword(this.email, this.password)
                              .then(cred =&gt; {
                                  ref.set({
                                      name: this.name,
                                      email: this.email,
                                      user_id: cred.user.uid
                                  });
                              })
                              .then(() =&gt; {
                                  this.$router.push({ name: "Home" });
                              })
                              .catch(err =&gt; {
                                  this.feedback = err.message;
                              });
                          this.feedback = "This alias is free to use";
                      }
                  });
              } else {
                  this.feedback = "You must enter all fields";
              }
          }
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><code>Home.vue</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template lang="html"&gt;
    &lt;div class="editProfile container"&gt;
      &lt;v-app id="inspire"&gt;
        &lt;v-container fluid&gt;
          &lt;h1&gt;Update Your Profile!&lt;/h1&gt;
  
          &lt;v-card max-width="344" class="mx-auto"&gt;
            &lt;v-card-title&gt;New User Input&lt;/v-card-title&gt;
            &lt;v-text-field v-model="newInput"&gt;&lt;/v-text-field&gt;
            &lt;v-card-actions&gt;
              &lt;v-btn text @click="addInput()"&gt;Click&lt;/v-btn&gt;
            &lt;/v-card-actions&gt;
  
            &lt;v-list class="elevation-1"&gt;
              &lt;v-list-tile-content v-for="user in this.$store.getters.getUsers" :key="user.id" &gt;
                &lt;v-list-tile&gt;
                  &lt;textarea v-model="user.newInput" readonly&gt;&lt;/textarea&gt;
                &lt;/v-list-tile&gt;
              &lt;/v-list-tile-content&gt;
            &lt;/v-list&gt;
          &lt;/v-card&gt;
  
        &lt;/v-container&gt;
      &lt;/v-app&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import firebase from "firebase";
  import db from "@/firebase/init";
  export default {
      name: "home",
      beforeCreate: function() {
          this.$store.dispatch("setCurrentUser");
      },
      data: () =&gt; ({
          currentlyEditing: null,
          newInput: null
      }),
      methods: {
          async addInput() {
              let ref = await db.collection("users");
              ref.where("user_id", "==", firebase.auth().currentUser.uid).add({
                  newInput: this.newInput
              });
          }
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Store.js</p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  import firebase from 'firebase'
  import db from '@/firebase/init'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
      state: {
          users: null
      },
      getters: {
          getUsers: state =&gt; {
              return state.users
          }
      },
      mutations: {
          setCurrentUser: state =&gt; {
              const users = []
              let ref = db.collection('users')
              ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
                  .then(snapshot =&gt; {
                      snapshot.forEach(doc =&gt; {
                          let currentUserData = doc.data()
                          currentUserData.id = doc.id
                          users.push(currentUserData)
                      })
                      state.users = users
                  })
          }
      },
      actions: {
          setCurrentUser: context =&gt; {
              context.commit('setCurrentUser')
          }
      }
  })
  </code></pre>