title: Unable to update existing document in Firebase using VUE
body: <p>I have never used Firebase before this is my first stab at it using Vue.</p>
  
  <p>I have a setup Firebase using Realtime Databas and set up my project so I can post using the below code in my .vue file</p>
  
  <pre><code>this.$http.post('https://MY_PROJECT_NAME.firebaseio.com/posts.json', {
                  title: this.blog.title,
                  body: this.blog.content,
                  createdDate: this.$options.filters.fullMthDate(this.blog.publishDate),
                  author: this.blog.author,
                  active: true,
                  closedDate: null,                
              }).then((response) =&gt; {
                  this.$blogAdded = true;
                  this.loading = false;
                  this.$router.push('/');                
              }).catch((error) =&gt; {
                  console.log(error);
              });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/7sX2k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7sX2k.png" alt="enter image description here"></a></p>
  
  <p>The thing I can't seem to find an answer to is how to then update this document when needed (e.g. user deletes an item, I want 'active' to become <code>false</code>)</p>
  
  <p>I went for the above code as I was using net ninjas tutorials who set FireBase up this way.</p>
  
  <p>I then do a <code>get</code> to list all items using below in my main component</p>
  
  <pre><code>this.$http.get('https://MY_PROJECT_NAME.firebaseio.com/posts.json').then(function(data) {
                  return data.json();
              }).then(function(data) {
                  var blogsArray = [];
  
                  for (let key in data) {
                       const date = new Date(data[key].createdDate);
                       const todaysDate = new Date();
  
                      if (date &lt;= todaysDate) {
                          data[key].id = key
  
                          blogsArray.push(data[key])
                      }
                  }
  
                  this.blogs = blogsArray;
                  this.loading = false;
              });
  </code></pre>
  
  <p>And this displays them on my site</p>
  
  <p><a href="https://i.stack.imgur.com/nYYOO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nYYOO.png" alt="enter image description here"></a></p>
  
  <p>When the user clicks the tile they go to a page where they can 'Delete/Cancel' the post and it's here I am stuck. Below is the code I am using for displaying the selected item</p>
  
  <pre><code>data() {
          return {
              id: this.$route.params.id,
              blog: {},
              loading: false,
              closeModal: false,
              showModal: false
          };
      },
  
      beforeMount() {
          this.loading = true;            
      },
  
      created() {
          this.$http.get('https://MY_PROJECT_NAME.firebaseio.com/posts/' + this.id + '.json').then(function(data) {            
              return data.json();
          }).then(function(data) {
              this.blog = data;
              this.loading = false;
          });
      },
  
      methods: {
          showCloseBlogModal() {
              console.log(this.blog)
              VueEvent.$emit('show-delete-blog-modal', this.blog);
          }
      }
  </code></pre>
  
  <p>Then when the modal is displayed I get the following in the <code>console.log</code></p>
  
  <p><a href="https://i.stack.imgur.com/BTI3d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BTI3d.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/GxbiJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GxbiJ.png" alt="enter image description here"></a></p>
  
  <p>I need to update the 'active' value to <code>false</code> when they click 'Yes' using the below</p>
  
  <pre><code>methods: {
      deleteBlog() {
          // CODE HERE WHEN CLICK 'YES' TO CANCEL
      }
  }
  </code></pre>