从 Vue 公式中获取正确格式的键：值对

Question

问题 我从 API 接收格式为 -

的 JSON 数据

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

我最近使用 Vue Formulate 制作了一个表单，到目前为止发现它非常有用，但是我在从表单中获取数据时遇到了问题。

我的模板中的表单如下 -

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

这是我的数据和逻辑 -

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

对于~的回应

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

~ bar 和 doe 是用户文本输入，B 和 D 是可硬编码的值，BSK 和 DOE 也是可硬编码的。我不想从这里发布数据，我根本无法在 JSON 中获得包含我需要的所有数据的适当输出格式。任何指导表示赞赏。

如果需要任何进一步的信息，请询问。

Answer 1

这种语法允许我在正确的位置设置适当的值。

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
}