Vue.js Templateタグが機能しない

Question

Vueを使ったカレンダー表示を作成しています。

週ごとにtrタグで切り離したいので、
日曜日（以下yobi変数が0の時）に<tr>タグを開始
土曜日（以下yobi変数が6の時）に<tr>タグを終了
させるようにしたいのですが、template部分がページに反映されません。

解決方法ご存じの方いましたら、ご教示のほどよろしくお願いいたします。

<template v-for="info in calendar">
  <template v-if="info.yobi == 0" v-html="'<tr>'"></template>
    <td accesskey=""
        :class="{'~省略~
        :style="{'~省略~
        <div class="day">{{ info.day }}</div>
    </td>
  <template v-if="info.yobi == 6" v-html="'</tr>'"></template>
</template>

ページの検証で確認した結果
上記のtemplateで書いた、<tr>が存在しない

・変数が正しく取得できていることは確認しました。
・データバインドで試しましたが、結果は変わりませんでした

<template v-if="info.yobi == 0" v-html="tag"></template>

    data: ()=> {
        return {
            tag: '<tr>',
        }

Comments

[FKM]

前の質問の回答だとうまくできなかったってことでしょうか？
https://teratail.com/questions/369333#reply-501255

[seastar]

ありがとうございます。
週をまたがるデータの表示などがあり、可能であれば月の配列の中でtrを差し込む方法を考えたく、新たに質問させていただきました。

Answer 1

templateではv-htmlは使えません。divとかでなければ使えません
https://jp.vuejs.org/v2/guide/syntax.html#%E7%94%9F%E3%81%AE-HTML

Comments

[seastar]

ご回答ありがとうございます。
今回やりたいことを再現する他の方法はなさそうですかね、、

[sousuke]

v-forの配列を「7つで１行にする」だけならflexとかを使えばいいです。

https://jsfiddle.net/78n9yxac/

[FKM]

前の質問の回答だとうまくできなかったってことでしょうか？
https://teratail.com/questions/369333#reply-501255

[seastar]

sousuke様
代案ありがとうございます。他のHTML,CSSが絡み合っており、直し中ですが、一度cssで flexを使った方法試してみます。