2017-07-06 57 views
0

你能用v模型逃避特殊字符嗎?我看到一個問題,我編輯了從數據調用收到的文本。 'this'在編輯時在textarea中顯示爲'&'#39;'&#39'。我知道v-html,但你可以使用v-model嗎?如果不是,另一種選擇是什麼?Vuejs v模型特殊字符

+0

你是說你得到HTML編碼的數據,並希望將其轉換爲純文本在textarea的使用? –

+0

是的 - 我需要用戶能夠編輯返回的數據。在我目前的解決方案中,使用v模型時,'this'顯示爲'&'#39;',導致用戶混淆,並且當保存更新文本'&'#39;'時,此'&#39'正在保存。 – slugabed

回答

0

v-model作品像v-text並顯示所有字符,而v-html讓你顯示html代碼。 如果您在源文件/調試器/響應中看到「this」,原因可能是編碼或您試圖顯示json-text。 由於'是NCR dez。字符爲'

v-model給出自動雙向綁定,如果你不需要,你可以使用其他指令之一。

+0

我需要能夠使用v模型,以便用戶可以更新和保存。 – slugabed

+0

你有沒有檢查過你的「'這個'」是否以utf-8的形式出現? – Reiner

+0

我將檢查過的數據格式加倍,它不是utf-8。我能夠更改提供商的響應,問題得到解決。 – slugabed

0

問題是你有編碼文本,你需要將其轉換爲純文本。如果它是正確的HTML,一個常見的技巧是將其設置爲scratch div的innerHTML,然後從該div中提取textContent。我在下面的代碼片段中創建了一個輔助函數來實現這一點。

你給的文本看起來像它裏面有一些額外的引號,所以你可能需要做一些更多的按摩來清理它,但這種方法仍然是我在這裏展示的:取文本,不要污染它,並將未受污染的文本分配給要編輯的變量。

const scratchDiv = document.createElement('div'); 
 
function toPlainText(html) { 
 
    scratchDiv.innerHTML = html; 
 
    return scratchDiv.textContent; 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    plainText: '' 
 
    }, 
 
    mounted() { 
 
    // fetching code-polluted text 
 
    this.plainText = toPlainText("'this&#39"); 
 
    } 
 
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <textarea> 
 
    {{plainText}} 
 
    </textarea> 
 
</div>