Get Correctly Formatted key:value Pair From Vue Formulate Form

Question

PROBLEM I receive JSON data from an API in the format -

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

I have recently made a form using Vue Formulate and have found it to be incredibly helpful so far, however I am having an issue getting data from my form.

My form is as below within my template -

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

This is my data and logic -

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));
    }
  }
};

For a response of ~

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

~ bar and doe are the user text inputs, B and D are hardcode-able values and BSK and DOE are also hardcode-able. I do not want to post the data from here, I simply cannot get the appropriate output format in JSON with all of the data I need. Any guidance appreciated.

Any further info needed please ask.

Answer 1

This syntax allowed me to set the approperiate values in the right place.

addMapping() {
  this.txnData[this.formValues.mapping] = this.formValues.id 
  console.log(JSON.stringify(this.txnData)) this.formValues = {} 
  //this.$formulate.resetValidation('txnXrefs') this section doesn't reset validation, ignore for answer
}