vue.jsのv-forで、繰り返したいものが複数ある場合

Question

ご覧いただきありがとうございます。

Vue.jsでv-forで繰り返したいものが複数ある場合どのようにすれば良いのか分からなくて質問いたしました。

Vue.jsで

<tbody> <tr>内容</tr> <tr>内容'</tr> </tbody> という雛形があり、

期待するHTML出力は

<tbody> <tr>内容1</tr> <tr>内容1'</tr> <tr>内容2</tr> <tr>内容2'</tr> <tr>内容3</tr> <tr>内容3'</tr> ... </tbody>

という風に

<tr>内容</tr> <tr>内容'</tr> を繰り返して表示させたいのですが、この場合

tbodyにv-forを書くと

<tbody> <tr>内容1</tr> <tr>内容1'</tr> </tbody> <tbody> <tr>内容2</tr> <tr>内容2'</tr> </tbody>

となってしまい意図したHTMLになりません。

<tbody> <div v-for> <tr>内容1</tr> <tr>内容1'</tr> </div> </tbody>

という方法も試したのですが、あまり意味のないdivを入れるのも気が引けました。

このような場合の対処法はありますか？
もし対処法がありましたら教えていただきたいです。

Answer 1

Vue.jsを

<tbody> <template v-for> <tr>内容</tr> <tr>内容'</tr> </template> </tbody>

とすることでtemplateは描画されず、
と出力することが出来ました。

<tbody> <tr>内容1</tr> <tr>内容1'</tr> <tr>内容2</tr> <tr>内容2'</tr> <tr>内容3</tr> <tr>内容3'</tr> ... </tbody>

お騒がせしました。