vue中json格式转换错误

在前端往后端发送数据进行修改的时候 需要转换为JSON格式 转换后打印出来的JSON是没有问题的 但是在调用接口回显的时候使用JSON.parse报错 VM26580:1 Uncaught (in promise) SyntaxError: Expected ',' or '}' after property value in JSON at position 32

img


这是我自己实现的一个富文本编辑器 修改属性后在style上面动态添加css 我是这样实现的

<template>
  <div>
    <div class="editor">
                <!-- <quill-editor
                  id="quillEditor"
                    v-model="content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)" 
                    @focus="onEditorFocus($event)"
                    @change="onContentChange($event)"
                    @ready="onEditorReady($event)"
                    >
                </quill-editor> -->
                <div class="head" id="head" :style="{visibility:status}">
                  <el-select v-model="fontFamily" placeholder="请选择" @change="handleFontFamilyChange">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-input class="fontSize" type="text" v-model="fontSize" @change="handleSizeChange"></el-input>
                  <i class="el-icon-arrow-up" style="position:absolute;
        top:3px;
        left:175px;" @click="jia"></i>
                  <i class="el-icon-arrow-down" style="position:absolute;
        top:15px;
        left:175px;" @click="jian"></i>
                <i class="iconfont icon-jiacu" style="margin-left:30px;" @click="jiacu"></i>
                <i class="iconfont icon-zitixiahuaxian" style="margin-left:15px;" @click="xiahuaxian"></i>
                <i class="iconfont icon-italic" style="margin-left:15px;" @click="italic"></i>
                <i class="iconfont icon-zitiyanse" style="margin-left:15px;" @click="fontColor=true"></i>
                <input type="color" v-model="color" v-show="fontColor" @change="handleChangeColor"/>
                <i class="iconfont icon-kaisuohuansuo" style="margin-left:15px;"></i>
                <i class="iconfont icon-shanchu" style="margin-left:15px;"></i>
                </div>
                <div class="body">
                  <span class="body" v-html="content" @change="onEditorChange"></span>
                </div> 
            </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      status:'',
      fontColor:false,
      color:'#000000',//默认选择颜色
      colorList:[], // 选择过的颜色数组
      familyList:[], // 选择过的字体种类数组
      sizeList:[], // 选择过的字体大小数组
      sizeJiaList:[], // 选择过的字体大小加数组
      sizeJianList:[], // 选择过的字体大小减数组
      content:'',
      names:this.name,
}
  },
  props:{
    name:''
   
  },
  created(){
  },
  mounted(){
this.content="<p style=''>学员姓名</p>"
},
methods:{
    
    // 字体大小
    handleSizeChange(){
      var size = this.content.split('font-size')
      this.sizeList.push(this.fontSize)
      console.log(size)
      if(size.length==1){
        var res = this.content.split('style=')
        res[0]=res[0]+`style=font-size:${this.fontSize}px;`
        this.content=res[0]+res[1]
      }else{
        console.log(this.sizeList[this.sizeList.length-2])
        console.log(this.sizeList)
        var res = this.content.split(`font-size:${this.sizeList[this.sizeList.length-2]}px;`)
        console.log(res)
        res[0] = res[0]+`font-size:${this.sizeList[this.sizeList.length-1]}px;  `
        this.content = res[0]+res[1]
      }
      console.log(this.content)
      console.log(this.family)
    },
 // 内容改变事件
        onEditorChange(val) {
          if(this.names=='@info-studentName@'){
            let res = val.split('学员姓名')
            val = res[0]+'@info-studentName@'+res[1]
          }
           
            this.$emit('editorChange',val)
        },
},
 watch:{
    content(newVal,oldVal){
      console.log(newVal,oldVal)
      this.onEditorChange(newVal)
    }
  }
}
</script>

<editor v-if="nameShow" :style="{position:'absolute',left:data.studentLeft+'px',top:data.studentTop+'px'}" v-on:editorChange="editorNameChange" name="@info-studentName@" v-draggable="{set:setStudent}" ></editor>

 // 编辑框名称传值
    editorNameChange(value) {
      console.log(value)
      this.data.studentName = value
      
    },

在页面中调用接口：
 that.form.template = JSON.stringify(that.form.template)
console.log(that.form.template)
        putObj(that.form)
              .then((data) => {
                if (data.data.code === 0) {
                  that.$message.success('保存成功')
                  that.certificateNameShow = false
                } else {
                  that.$message.error(data.data.msg)
                }
              })
              .catch(() => {

              })


通过接口访问回显：
console.log(this.tableData.template)
this.tableData.template = JSON.parse(this.tableData.template)


修改时的template打印：
[
  {
    "type":1,
    "content":"<p style=font-size:19px;\"\">@info-studentName@</p>",
    "image":"",
    "dx":-75,
    "dy":-97
  }
]

接口回显时打印template：
[
  {
    "type":1,
    "content":"<p style="font-size:19px;">@info-studentName@</p>",
    "image":"",
    "dx":-75,
    "dy":-97
  }
]


此时  style后自动添加了双引号  报错Uncaught (in promise) SyntaxError: Expected ',' or '}' after property value in JSON at position 32

style里改成单引号试试，应该就OK了

其实不太明白整个页面是什么样子的，要是只提交数据，dom部分前端处理呢

请参考：
http://events.jianshu.io/p/6ee8aab83859

  1. 不是你的问题,你解决不了
  2. 你传给后端什么数据格式,回显接口就应该给你返回同样的数据
  3. 让后端修改吧
  4. 如果你一定要在前端做处理,你组装style时使用单引号['],不要使用["]

JSON.stringify 方法用于将 JavaScript 值转换为 JSON 字符串。当转换对象时，所有的键名都会被双引号包围。


如果在转换时包含了HTML标签，需要确保标签内的引号与外面的引号区分开来。在这个例子中，可以在style属性中用单引号代替双引号，或者用转义字符的方式表示双引号，如：

{
    "type":1,
    "content":"<p style='font-size:19px;'>@info-studentName@</p>",
    "image":"",
    "dx":-75,
    "dy":-97
}

或者

{
    "type":1,
    "content":"<p style=\"font-size:19px;\">@info-studentName@</p>",
    "image":"",
    "dx":-75,
    "dy":-97
}

应该是后端那边给统一都替换成了双引号,叫后端修改下

是style后面那个等号的问题

前后端交互：前端传递数据是json格式，非常详细
如有帮助，望采纳
https://blog.csdn.net/qq_35439539/article/details/121155806

这里已经说明错误了

img


这里错误

img