如何从Vue Formulate表单中获取符合要求格式的key:value键值对

你只需要修正下拉选项的配置，再加一步数据组装逻辑就能生成目标格式的JSON：

1. 修正下拉选项的value配置 #

你现有代码里下拉选项的value都写死成了id，导致无法拿到选中的编码值，先调整为：

<FormulateInput
  type="select"
  name="code"
  label="Choose Code"
  :options="[{ value: 'B', label: 'B' },{ value: 'S', label: 'S' },{ value: 'D', label: 'D' }]" 
/>

2. 新增硬编码映射关系，调整提交方法的组装逻辑 #

提前定义好每个id对应的description值，再按目标结构拼接数据即可：

export default {
  name: "TxnMappings",
  data() {
    return {
      formValues: {},
      // 存储最终生成的目标结构
      targetJson: { foo: {} },
      // 硬编码id和描述的对应关系，可按需扩展
      descMapping: {
        B: 'BSK',
        D: 'DOE',
        S: '自定义S对应的描述'
      },
      txnData: this.data,
    };
  },
  props: ["data", "hasAddTxn", "isCreate"],
  methods: {
    addMapping() {
      const { code, mapped } = this.formValues
      // 将用户输入的映射名作为key，追加到foo属性下
      this.targetJson.foo[mapped] = {
        id: code,
        description: this.descMapping[code]
      }
      // 打印查看生成的完整JSON
      console.log(JSON.stringify(this.targetJson))
    }
  }
};

效果说明 #

如果用户在文本框输入bar、下拉选B，提交后生成的结构为：

{"foo":{"bar":{"id":"B","description":"BSK"}}}

多次提交不同的映射名和编码，会自动在foo下累加对应的键值对，完全匹配你需要的格式。

内容的提问来源于stack exchange，提问作者Alpug Parker