Vue.js 将对象嵌套在对象中

寻找有关如何使用窗体在对象内嵌套对象的一些提示。我的表单当前更改对象的键和值。然而，我现在希望第二个按钮能够创建子（正确的术语？）表单输入。下面你可以看到一个例子。我花了一上午的时间看道具，但我不确定这是否是正确的方法，任何建议都非常感谢

   {
      "color": "black",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,255,255,1],
        "hex": "#000"
      }
    },    

---

如果您想要n个表单和n个子表单，只需按照相同的结构为其创建一个模型，并向表单传递道具

    parent = {
        ...props,
        children: []
    }

    child = {
        ...props
    }

如果表单太复杂（或者有点复杂），请将它们拆分为单独的组件，并将子项作为道具传递

如果您想在父窗口和子窗口中使用相同的表单，请查看插槽，它们将允许您创建灵活的布局

const getDefaultObject = () => ({
    name: '',
    dataValue: '',
    type: ''
  })
  
  const app = new Vue({
    el: '#app',
    computed: {
      mappedObjects() {
        return this.objects.map(({
          name,
          dataValue,
          type
        }) => ({
          [name]: dataValue,
          type
        }))
      }
    },
    props: {
        
    },
    data() {
      return {
        seen: false,
        types: ['string', 'character', 'number', 'int', 'floating-point', 'boolean', 'date;'],
        objects: []
      }
    },
    methods: {
      addNewObject: function() {
        this.objects.push(getDefaultObject())
      },
      removeObject: function(index) {
        Vue.delete(this.objects, index);
      },
      addNewChildObject: function () {
      }
    }
  })

    parent = {
        ...props,
        children: []
    }

    child = {
        ...props
    }