使用 Vue 将新子项添加到实时 Firebase 数据库答案

【问题标题】：Adding a new child to a real-time Firebase database using Vue使用 Vue 将新子项添加到实时 Firebase 数据库
【发布时间】：2018-05-01 08:04:49
【问题描述】：

模板：

<div class="addPlant" v-else-if="addPlantShow">
  <div>
    <h5 class="goBack"@click="handleBackToCollection()">Back to {{selectedCollection.collectionName}}</h5>
    <h2>Add Plant to {{selectedCollection.collectionName}}</h2>
  </div>
  <div>
    <form v-on:submit.prevent="addPlant(selectedCollection)">
    <div>
      <label for="plantName">Name: </label>
      <input type="text" id="plantName" v-model="newPlant.plantName" required>
      <br>
      <label for="plantDescription">Description: </label>
      <input type="text" id="plantDescription" v-model="newPlant.plantDescription">
      <input type="submit" value="Add" @click="handleBackToCollection()">
    </div>
    </form>
  </div>
</div>

selectedCollection 是我在浏览器中单击的特定集合。

脚本：

import Firebase from 'firebase'
//firebase config here = {}
let app = Firebase.initializeApp(config);
let db = app.database();
let collectionsRef = db.ref('collections');

export default {
  firebase: {
    collections: collectionsRef
  },
  data() {
    return {
      newPlant : {
        plantDescription: "",
        plantName: "",
      }
    }
  },
  methods: {
    addPlant(sc) {
      //How do I add a new child here if I don't know the specific branch?
      this.specificCollectionRef = sc.plants;
      collectionsRef.child(this.specificCollectionRef).push(this.newPlant);
      this.newPlant.plantDescription = "";
      this.newPlant.plantName = "";
  }
}

我只包含了 plantDescription 和 plantName 以进一步简化这一点。

【问题讨论】：

你有什么问题？
当我想推的孩子不明确时，我如何推新孩子？ addPlant() 中的两行代码是我正在努力解决的问题。假设我想将新植物添加到我在页面上单击的特定集合中。我将单击的选定集合保存在一个对象中，但是我如何将该对象（新植物）推送到该选定集合中？也许我只是把这一切都搞错了。
如果specificCollectionRef 中所选集合的值正确，则为collectionsRef.child(this.specificCollectionRef).child("plants").push(this.newPlant);
这帮助很大！谢谢！这不是解决方案，但我能够弄清楚。解决办法：this.collectionRef = sc;collectionsRef.child(this.collectionRef['.key']).child("plants").push(this.newPlant);
很高兴听到艾米。您能否将其发布为答案，以便其他人可以更轻松地看到您是如何解决问题的？

标签： javascript firebase firebase-realtime-database vue.js

【解决方案1】：

将newPlant()中的前两行代码改为：

this.collectionRef = sc;
collectionsRef.child(this.collectionRef['.key']).child("plants").push(this.newPlant);

【讨论】：