Vueで文字列を渡してhtmlとして扱う方法

Question

次のコードを使ってexpの値を渡そうとしています。ただし、selectedChannel.explanationの形式は、 "< b>チャネル名</b>"です。どのように私はそれをチャンネル名として表示するためにかを得ることができますか？以下は

computed: { 
    channel: { 
     get() { 
      const selectedChannel = this.$store.getters.selectedChannel; 
      return selectedChannel ? selectedChannel.explanation : ''; 
     } 

私はあなたが入力タグ（また、テキストエリア）に与えられた任意の値がされる「V-HTML」ディレクティブ

Answer 1

を探していると思うのテンプレート

<div class="channels"> 
     <textarea 
     v-model="channel"> 
     </textarea> 
</div> 

Answer 2

の一部でありますstringとして処理されます。

<div class="channels" v-html="channel"> 
</div> 

サンプル：

<div class="channels" v-html="channel"> 
</div> 

Answer 3

あなたはV-HTMLディレクティブを使用する必要があります。
はtextareaタグにチャンネル名を表示するには、テンプレートには、この

computed: { 
    channel: { 
     get() { 
      const selectedChannel = this.$store.getters.selectedChannel; 
      // using regex to match the text between "b" tag 
      const channelName = selectedChannel.match("<b\b[^>]*>(.*?)<\/b>")[1]; 
      return selectedChannel ? `<textarea>${channelName}</textarea>` : ''; 
     } 

を行うことができますフィドルhere