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

最新推荐文章于 2025-07-25 10:08:45 发布

原创最新推荐文章于 2025-07-25 10:08:45 发布 · 486 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #jsp #后台

日常问题大杂汇同时被 2 个专栏收录

82 篇文章

订阅专栏

前端相关

27 篇文章

订阅专栏

本文介绍了在JSP页面中集成Vue时遇到的element-ui修改按钮渲染失败的问题，原因是后台传入的值包含换行导致的syntaxerror。通过在DOM中增加元素并利用jQuery设置Vue数据属性的值，成功解决了该问题。解决方案是在Vue实例化前，先用隐藏的span元素接收后台数据，然后在mounted钩子中用jQuery获取并赋值给Vue的数据属性。

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

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

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

<script>
    let vm = new Vue({
        el: '#app-Detail',
        data: function () {
            return {
                appIntro: '${app.intro}'
            }
        }
				…………
		}
</script>

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

<script>
    let vm = new Vue({
        el: '#app-Detail',
        data: function () {
            return {
                appIntro: '
                    辅助系统，配置等相关信息
                    http://wiki.i……
                    存储活动信息'}
        }
				…………
		}
</script>

解决方案：

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