title: How to delete and edit records in firebase using Vue js
body: <p>I'm a beginner in javascript and web design in general and I'm trying out learning how to use Vue js to create, read, update and delete data on a firebase real-time database using this <a href="https://www.youtube.com/watch?v=831zOI02Q_0" rel="nofollow noreferrer">tutorial</a>. The tutorial has been quite helpful, I managed to set up Vue CLI, install Vuefire and firebase and create a project that can successfully add a list of names to my firebase database. However, I got stuck when it came to deleting and editing the names. Here is the error I am getting:</p>
  
  <pre><code>Error: "Reference.child failed: First argument was an invalid path = "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]""
  validatePathString index.cjs.js:1669
  child index.cjs.js:13845
  setEditName App.vue:86
  click App.vue:68
  </code></pre>
  
  <p>The way I see it, it means the argument '.key' that I'm using in <code>removeName</code> and other functions, is invalid, either because it's undefined, empty or contains the characters listed in the error. So if this isn't the way to edit and delete records in Firebase real-time database using Vue js, then how is it done?</p>
  
  <p>Here is the code:</p>
  
  <p>App.vue</p>
  
  <pre><code>&lt;div&gt;
      &lt;ul&gt;
        &lt;li v-for="personName of names" 
          v-bind:key="personName['.key']"&gt;
          &lt;div v-if="!personName.edit"&gt;
            &lt;p&gt;{{personName.name}}&lt;/p&gt;
            &lt;button @click="removeName(personName['.key'])"&gt;
              Remove
            &lt;/button&gt;
            &lt;button @click="setEditName(personName['.key'])"&gt;
              Edit
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div v-else&gt;
            &lt;input type="text" v-model="personName.name"&gt;
            &lt;button @click="saveEdit(personName)"&gt;
              Save
            &lt;/button&gt;
            &lt;button @click="cancelEdit(personName['.key'])"&gt;
              Cancel
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here are the functions for the CRUD database operations: </p>
  
  <pre><code>removeName(key) {
    namesRef.child(key).remove();
  },
  // This function updates the name under a specific key
  // in the firebase db hence editting a name
  setEditName(key) {
    namesRef.child(key).update({ edit: true });
  },
  // Create function for cancelling edit
  cancelEdit(key) {
    namesRef.child(key).update({ edit: false })
  },
  // Function for saving edits
  saveEdit(person) {
    const key = person['.key']
    // Set overwrites the current data
    namesRef.child(key).set({ name: person.name, 
    edit: false })
  }
  </code></pre>
  
  <p>Your help will be much appreciated. Thanks in advance.</p>