1. 程式人生 > >Vue後臺開發常見問題:textarea換行的string轉存資料庫後,提取到前端繫結到vue後JS報錯

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>