前端弹窗展示JSON数据

在页面弹窗展示json数据，需要换行展示，在这里有两种情况：
1、数据库存的json数据换行，为标准展示格式：
这种情况下，获取到后端数据后，前端只需要进行以下操作：
…
直接将后端数据展示：
ts部分：

openInformationDialog(row) {
  isShowInfoDialog.value = true
  if (row) {
	informationJSON.value = row
  }
}

div部分：

  <div style="white-space: pre-line">
    <pre>{{informationJSON}}</pre>
  </div>

存在的问题，空格不展示，只有换行，后面需要探究一下。

2、数据库存的数据为字符串类型的json数据，无换行，无空格。
这种情况下，获取到后端数据后，前端需要将字符串进行JSON转换
ts部分：

openInformationDialog(row) {
  isShowInfoDialog.value = true
  if (row) {
    informationJSON.value = JSON.stringify(JSON.parse(row), null, 4)
  }
}

div部分：

 <div style="white-space: pre-line">
    <pre>{{informationJSON.value}}</pre>
 </div>

这里推荐使用第二种方式，不论是数据库存储数据方面，还是页面展示效果方面来说，第二种都比较友好一点。