从 Vue Formulate Form 获取正确格式的 key:value 对

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 也是可硬编码的。我不想从这里 post 获取数据，我根本无法在 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
}

从 Vue Formulate Form 获取正确格式的 key:value 对

Get Correctly Formatted key:value Pair From Vue Formulate Form

javascript

json

vuejs2

vue-formulate