Vuejs v-model特殊文字

Question

v-modelで特殊文字をエスケープできますか？私はデータコールから受け取ったテキストを編集する問題が発生しています。 'これは' &＃39と表示されていますが、編集時にこのテキストボックスに '&＃39'と表示されています。私はv-htmlについて知っていますが、v-modelでそれを使用できますか？そうでない場合、別のオプションは何ですか？

Answer 1

v-modelはv-textのように動作し、すべての文字を表示します。v-htmlは、htmlコードを表示させます。 ソースファイル/ debugger/responseに "this"が表示された場合は、理由がエンコードであるか、json-textを表示しようとしている可能性があります。 'はNCR dezです。文字の場合は'です。

v-modelは、自動双方向バインディングを提供します。必要がない場合は、他のディレクティブのいずれかを使用できます。

Answer 2

問題は、エンコードされたテキストがあり、プレーンテキストに変換する必要があることです。適切なHTMLの場合は、スクラッチdivのinnerHTMLとして設定し、そのdivからtextContentを抽出します。私はそれを行うために私のスニペットで少しヘルパー機能を作成しました。

テキストに余分な引用符があるように見えます。そのため、データを整頓するために必要なデータのマッサージがいくつかあるかもしれませんが、アプローチはまだ私がここに示しています。それをunpolluteして、編集したい変数に感染していないテキストを割り当てます。

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>