Axios提交时如何将JSON格式meta值绑定到HTML表单并正确提交修改值

安全阿岳

2026-10-9

问题根因

你直接将JSON.parse(clientData.meta).accessToken作为v-model的绑定值，这个值是JSON.parse生成的临时对象的属性，和clientData.meta这个字符串没有双向绑定关联，修改输入框内容自然不会同步更新原meta字段的字符串值。

推荐解决方案：使用带get/set的计算属性

这个方案不需要修改原有提交逻辑，自动实现双向同步：

组件中新增计算属性accessToken：

computed: {
  accessToken: {
    get() {
      // 读取时解析meta字符串取值，加兜底避免解析报错
      const metaObj = JSON.parse(this.clientData.meta || '{}')
      return metaObj.accessToken || ''
    },
    set(newVal) {
      // 修改时自动更新clientData.meta的字符串值
      const metaObj = JSON.parse(this.clientData.meta || '{}')
      metaObj.accessToken = newVal
      this.clientData.meta = JSON.stringify(metaObj)
    }
  }
}

修改textarea的绑定属性：

<textarea
   name="merchant_token"
   class="mt-3 w-1/2"
   v-model="accessToken"
>
</textarea>

备选方案：提交前手动同步

如果不想新增计算属性，也可以用临时变量绑定输入框，提交时手动更新meta：

绑定输入框到临时变量

<textarea
   name="merchant_token"
   class="mt-3 w-1/2"
   v-model="tempAccessToken"
>
</textarea>

提交前同步值到meta

async submit() {
  // 先把修改后的值更新到meta
  const metaObj = JSON.parse(this.clientData.meta || '{}')
  metaObj.accessToken = this.tempAccessToken
  this.clientData.meta = JSON.stringify(metaObj)
  // 原有提交逻辑不变
  const response = await update.call(this, this.clientData);
}