<template>
<div class="change-dispose">
<el-row class="main-page-dispose">
<!--左侧输入-->
<el-col :span="9" :offset="1" class="middle-show">
<span>修改</span>
<textarea class="input-show left-input" v-model="inputJSON"></textarea>
</el-col>
<!--右侧实时显示-->
<el-col :span="9" :offset="1" class="middle-show">
<span>结果展示/错误提示</span>
<pre class="input-show" >{{showJSON}}</pre>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "ChangeDispose",
data() {
return {
inputJSON: '', //从服务端获取到的json数据
showJSON: '', //显示的JSON
}
},
mounted() {
},
watch: {
//左侧JSON输入的时候，进行校验
inputJSON(val) {
try {
this.showJSON = JSON.stringify(JSON.parse(val), null, 2);
this.JSONFormatFlag = true;
} catch (err) {
this.JSONFormatFlag = false;
let nPosition = err.message.replace(/[^0-9]/ig, "");
this.showJSON = val.substr(0, nPosition) || val
}
}
},
methods: {
}
}
</script>
<style scoped>
</style>
前端格式化显示JSON并校验错误
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- JSON格式化 对于UI上input或者textarea，根据不同的需求或者说要求实现不同的展示效果。对此，如若u...
- 本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱，ToolFk 特色是专注于程序员日常的...
- 前提条件 从后台获得json字符或对象，或者自定义json字符串或对象。 原理 JSON.stringify本身就...
- robotframework版本 robotframework 3.0.2 文件...
