vue json 格式化小工具 自用记录[未完成]

<template>
  <div>
    <h1>格式化工具</h1>
    <el-form ref="form" :model="form" :rules="rules" label-width="0px">
      <el-row>
        <el-col :span="11">
          <div>Before</div>
          <el-form-item label prop="dataBefore">
            <el-input type="textarea" v-model="form.dataBefore" :rows="25" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <div style="text-align:center; margin:20px">
            <div>
              <el-button
                size="small"
                style="width:100%"
                type="primary"
                @click="formatData('form')"
              >格式化</el-button>
            </div>
            <div style="margin-top:20px">
              <el-input v-model="form.indent" size="small" type="number" placeholder="缩进"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="11">
          <div>After</div>
          <el-input type="textarea" v-model="form.dataAfter" :rows="25" placeholder></el-input>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        dataBefore: "",
        dataAfter: "",
        indent: 2
      },
      rules: {
        dataBefore: {
          required: true,
          message: "请输入",
          trigger: "blur"
        }
      }
    };
  },
  methods: {
    formatData(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          try {
            let indent = Number.parseInt(this.form.indent)
            let jsonObj = JSON.parse(this.form.dataBefore);
            this.form.dataAfter = JSON.stringify(
              jsonObj,
              null,
              indent
            );
          } catch (error) {
            this.$message({
              message: "请输入正确格式的数据",
              type: "warning"
            });
          }
        }
      });
    }
  }
};
</script>

<style>
</style>