Javascriptの配列にhtml要素(vue.js)

Question

配列に<li>のhtml要素を入れ、<ul>に代入したいのですが、文字列になってします。
htmlで出力する方法はあるのでしょうか。

流れとしましては、vue.jsを使用していまして、

data:function(){
 return{
  testArray:
   ["<div>hoge</div>","<div>hoge2</div>","<div>hoge3</div>"]
 }
}

html側にv-forで配列を代入したいです。

<ul>
 <li v-for="item in testArray">{{item}}</li>
</ul>

現状ですと、

<ul>
 <li>"<div>hoge</div>"</li>
 <li>"<div>hoge2</div>"</li>
 <li>"<div>hoge3</div>"</li>
</ul>

このようになってしまいます。

よろしくお願いします。

Answer 1

v-htmlを使用することで解決できませんか？

<ul>
 <li v-for="item in testArray">
  <span v-html="item"></span>
 </li>
</ul>

VueJS公式ガイド-テンプレート構文

Comments

[okpk]

html出力できました。
v-html という記法があったのですね。大変助かりました。
ありがとうございます。