1

我正在通过 VueFire 使用 Vue 和 Firebase 来构建一个关联对象的表单。我有以下形式和方法：

<form @submit.prevent="addRelation">
      <select v-model="newRelation.parent">
        <option v-for="item in content">{{item.name}}</option>
      </select>
      <select v-model="newRelation.child">
        <option v-for="item in content">{{item.name}}</option>
      </select>
      <input type="submit" value="Add Relation"/>
    </form>

和 Vue：

new Vue({
    el: "#app",
    data: {
        related: {},
        newRelation: {
            parent: '',
            child: ''
        }
    },
    firebase: {
        content: contentRef,
        related: relatedRef
    },
    methods: {
        addRelation() {
            relatedRef.push(this.newRelation)
            console.log('relation added')
        }
    },

这会在 Firebase 中像这样添加 JSON：

{
    "child": "objectc",
    "parent": "objecta",
    ".key": "-KjFYZn8dqP29uLmJBJP"
  },

它推送一个新的 Firebase ID 并嵌套数据。为了让 Firebase 正确处理“关系”，它们的结构必须如下：

{
    ".key":"-Existing ID of object A
    "-Existing ID of object B": true
}

如何更新我的方法以像这样构造信息？我有这个CodePen “'相关'内容”部分的底部两个条目显示了我希望它如何提交（我手动添加）。

4

0 回答 0