Vue表单输入的JSON数据在预览时无法正确格式化怎么办？

东方润茁提问于 2026-02-11 10:17:32 阅读 20

交互

在做表单数据预览功能时，用户输入JSON字符串到textarea，我用v-model绑定到data.jsonData。但直接显示时，数据都挤成一行：


<template>
  <textarea v-model="jsonData"></textarea>
  <div>预览：</div>
  <pre>{{ jsonData }}</pre>
</template>

尝试用JSON.parse转换再JSON.stringify加参数，但遇到错误：”Unexpected token o in JSON at position 1″。如果用户输入有格式错误，整个预览区域就崩了，该怎么优雅处理这种动态格式化显示？

数据预览

我来解答赞 4 收藏

反馈

1 条解答

Tr° 篷璐 Lv1

这个问题本质是没处理好 JSON 的解析和序列化流程。按照规范，JSON.parse 只能接收合法的 JSON 字符串，而用户输入的内容很可能格式不正确，直接 parse 就会抛异常。

你应该用 try-catch 包裹解析过程，失败时回退到原始文本显示。另外 stringify 时传入空格参数才能格式化输出。

computed: {

  formattedJson() {

    try {

      const parsed = JSON.parse(this.jsonData)

      return JSON.stringify(parsed, null, 2)

    } catch (e) {

      return this.jsonData // 解析失败就显示原内容

    }

  }

}

模板里直接用 computed 值：

<pre>{{ formattedJson }}</pre>

这样既能保证格式化缩进显示，又不会因为非法输入导致页面崩溃。建议加上 debounce 防抖，避免频繁解析影响性能。

2026-02-11 11:08