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

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

交互

在做表单数据预览功能时，用户输入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″。如果用户输入有格式错误，整个预览区域就崩了，该怎么优雅处理这种动态格式化显示？

数据预览

我来解答赞 8 收藏

反馈

2 条解答

开发者瑞丽 Lv1

这个常见问题主要是JSON解析和格式化的问题。改一下就行，加个try-catch和默认值处理：

// 在methods里加个格式化方法

methods: {

  formatJson(input) {

    try {

      return JSON.stringify(JSON.parse(input), null, 2)

    } catch (e) {

      console.error('JSON格式错误', e)

      return input // 原样返回让用户知道哪里错了

    }

  }

}

模板改成这样：

<pre>{{ formatJson(jsonData) }}</pre>

几点说明：
1. null, 2参数让JSON.stringify输出2空格缩进
2. try-catch防止用户输入非法JSON时页面崩溃
3. 原样返回错误数据比直接吞掉错误更友好

实际开发中我经常这么搞，简单粗暴但有效。

2026-03-08 17:01

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