PROBLEMA Recibo datos JSON de una API en el formato -

 "foo":{"bar":{"id":"B","description":"BSK"},"doe":{"id":"D","description":"DOE"}}

Recientemente creé un formulario usando Vue Formulate y hasta ahora he encontrado que es increíblemente útil, sin embargo, tengo un problema para obtener datos de mi formulario.

Mi formulario es el siguiente dentro de mi plantilla:

 <div> <CRow> <FormulateForm class="fit-form" v-model="formValues" @submit="addMapping()"> <CRow> <CCol> <FormulateInput type="select" name="code" label="Choose Code" :options="[{ value: 'id', label: 'B' },{ value: 'id', label: 'S' }]" /> </CCol> <CCol> <FormulateInput type="text" name="mapped" label="Type Map Name" /> </CCol> </CRow> <FormulateInput type="submit" class="queue-btn" /> </FormulateForm> </CRow> </div>

Estos son mis datos y lógica -

 export default { name: "TxnMappings", data() { return { formValues: {}, newMapping: {}, txnData: this.data,//This comes from parent }; }, props: ["data", "hasAddTxn", "isCreate"], methods: { addMapping() { console.log(Object.entries(this.formValues)); console.log(JSON.stringify(this.formValues)); } } };

Para una respuesta de ~

 "foo":{"bar":{"id":"B","description":"BSK"},"doe":{"id":"D","description":"DOE"}}

~ bar y doe son las entradas de texto del usuario, B y D son valores que se pueden codificar y BSK y DOE también se pueden codificar. No quiero publicar los datos desde aquí, simplemente no puedo obtener el formato de salida adecuado en JSON con todos los datos que necesito. Cualquier orientación apreciada.

Cualquier información adicional necesaria por favor pregunte.