Vue Jsp页面值绑定出现换行后台值导致syntaxerror 问题处理

背景：老项目是jsp渲染页面，为了便于开发一些功能，于是在jsp页面中集成了vue。

今天开发的一个修改功能，在渲染时，使用element-ui的修改按钮无法渲染出来，在浏览器看控制台有报 syntaxerror的错误。

因为修改功能是已经测试过的功能，没有遇到错误，所以应该是内容的问题。

<script>
    let vm = new Vue({
        el: '#app-Detail',
        data: function () {
            return {
                appIntro: '${app.intro}'
            }
        }
				…………
		}
script>
1
2
3
4
5
6
7
8
9
10
11

然后从源代码中看到从后台接收到的值的内容是有换行的

<script>
    let vm = new Vue({
        el: '#app-Detail',
        data: function () {
            return {
                appIntro: '
                    辅助系统，配置等相关信息
                    http://wiki.i……
                    存储活动信息'}
        }
				…………
		}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

解决方案：

增加dom元素接收后台传来的值，然后在vue初始化后调用jquery方法的方式对vue的属性赋值。

<span id="appIntro" style="display: none">${app.intro}span>
<script>
 let vm = new Vue({
        el: '#app-Detail',
        data: function () {
            return {
                appIntro: ''
            }
        },
        mounted: function () {
            this.appIntro = $("#appIntro").html();
        },
        …………
 }
 script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

问题解决。