使用Javascript - Vuejs删除firebase中的记录

Question

我能够在Firebase数据库中显示我的产品记录中的所有数据，我现在想要的是删除我选择的某个记录。

我得到了一些Firebase的文档，但我对VueJs不太满意，虽然我认为这更像是一个JavaScript问题。

当我点击删除链接时，我在控制台上获得的是：

  

错误：Firebase.child失败：第一个参数是无效路径：   “不确定”。路径必须是非空字符串，不能包含“。”，   “＃”，“$”，“[”或“]”

这是我的代码：

<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>

下面你可以看到我的数据库：

感谢任何帮助，谢谢。

Answer 1

您需要首先引用该记录，然后调用remove函数，这是一个示例：

<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>

Answer 2

我认为你应该从prodid

获取产品ID

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