Vue后台开发常见问题：textarea换行的string转存数据库后，提取到前端绑定到vue后JS报错

最新推荐文章于 2024-03-06 14:03:25 发布

原创最新推荐文章于 2024-03-06 14:03:25 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #textarea

Vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

Egg.JS

4 篇文章

订阅专栏

本文探讨了在Vue框架中使用<textarea>元素时遇到的换行符处理难题，详细解释了<textarea>与html换行符的区别及由此引发的页面崩溃问题。文章提供了两种解决方案：一是放弃Vue数据绑定，采用<pre>标签直接展示数据；二是后台处理换行符，将替换为<br/>，并使用v-html渲染。

问题1：
在后台使用 <textarea>时，存入数据库没有问题，在编辑页面亦或是详情页，我们从数据库读取传入页面，绑定 Vue.data会出现因为值有换行符而导致整个 script崩溃的问题

导致原因：
<textarea>中的换行符是\n
html中的换行符是<br/>
类似：
    data:{
        content : 'I
        Love
        you',
        title:'it's a jok'
    }
而js要求string字符串中不能有换行,上边这种情况就会导致页面崩溃

解决方法：
    1：
        放弃Vue的数据绑定
        <div>
            <pre><%-data.content%></pre>
        </div>
        用<pre>包裹，用<%-%>直接获取后台返回的数据
    2：
        后台从数据库拿到数据后，处理换行符，即将\n替换为<br/>，然后返回给页面
        页面绑定Vue，用v-html渲染
        
注意事项：
    当我们在编辑页渲染数据到页面时，要注意文本框内如果多出了很多空格和换行，那是因为
    我们常写的html格式是
    <div>
        <textarea>
            <%-data.content%>
        </textarea>
    </div>
    需要注意的是div>textarea>数据之间的换行会被html解析
    我们需要如此编写
    <div><textarea><%-data.content%></textarea></div>