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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值