Delete record in firebase with Javascript - Vuejs

Question

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:

Any help is appreciated, Thank you.

dont know much about vue.js, but looks like you are passing a string to product[] that is y it is undefined. So first try to make sure that this productsRef.child(product['.key']).remove(); actually works, by passing in a hardcoded key. Then if that works, figure out how to get the key and pass it to the same expresion. — JustLearning
– JustLearning, Commented Feb 17, 2018 at 14:16

FBC · Accepted Answer · 2018-02-17 15:19:53Z

1

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>

answered Feb 17, 2018 at 15:19

FBC

1,1308 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muli Over a year ago

This is it, Thank you

Tomasz Kostuch · Accepted Answer · 2018-02-17 15:06:29Z

0

I think you should take product id from prodid

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

answered Feb 17, 2018 at 15:06

Tomasz Kostuch

2491 silver badge14 bronze badges

Collectives™ on Stack Overflow

Delete record in firebase with Javascript - Vuejs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related