CODEWITHSUNDEEP
javascriptfirebasevue.js
Muli
Muli

Reputation: 214

Delete record in firebase with Javascript - Vuejs

I am able to show all data from my products record in Firebase DB, what i want now is to delete a certain record that i select.

I got a bit of the documentation of Firebase but i'm not so good with VueJs, although i think this is more of a JavaScript problem.

What i get on my console when i click the delete link is:

Error: Firebase.child failed: First argument was an invalid path: "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"

Here is my code:

<template>
<tbody v-for="(key, value, index) in products">
    <tr v-for="k, val in key">
        <td>{{ k.name }}</td>
        <td>{{ k.description }}</td>
        <td>{{ k.oldPrice }}</td>
        <td>{{ k.price }}</td>
        <td>{{ k.prodId }}</td>
        <td>{{ k.sellerName }}</td>
        <td><span class="glyphicon glyphicon-trash btn-delete-style" v-on:click="removeProduct(k)" title="Delete Product"></span></td>
    </tr>
</tbody>
</template>

<script>
removeProduct: function (product) {
  console.log("Product:" + product);
  productsRef.child(product['.key']).remove();
  toastr.success("Product deleted successfully");
}
</script>

Below you can see my DB:

enter image description here Any help is appreciated, Thank you.

Upvotes: 1

Views: 2505

Answers (2)

FBC
FBC

Reputation: 1132

You need to reference first to that record and then call the remove function, here is an example:

<template>
  <tbody v-for="(key, value, index) in products">
      <tr v-for="k, val in key">
          <td>{{ k.name }}</td>
          <td>{{ k.description }}</td>
          <td>{{ k.oldPrice }}</td>
          <td>{{ k.price }}</td>
          <td>{{ k.prodId }}</td>
          <td>{{ k.sellerName }}</td>
          <td><span class="glyphicon glyphicon-trash btn-delete-style" v-on:click="removeProduct(k, k.sellerId, k.prodId)" title="Delete Product"></span></td>
      </tr>
  </tbody>
</template>
<script>
  removeProduct: function (product, sellerID, prodId) {
    var currentRef = db.ref('products/' + sellerID + '/' + prodId);
    currentRef.remove();
    toastr.success("Product deleted successfully");
  }
</script>

Upvotes: 1

Tomasz Kostuch
Tomasz Kostuch

Reputation: 249

I think you should take product id from prodid

productsRef.child(product['prodid']).remove()

Upvotes: 0

Related Questions