前端格式化显示JSON并校验错误

<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>