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

问题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>

猜你喜欢

转载自blog.csdn.net/Model_Vincent/article/details/84099877