Vue後臺開發常見問題:textarea換行的string轉存資料庫後,提取到前端繫結到vue後JS報錯
阿新 • • 發佈:2018-11-15
問題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>