vue にて v-forを使い横に並べる方法についての質問

Question

vue についてお聞きしたいです。

配列があり、v-for を使い、テーブルの横に並べたいです。

|今年|取得日1 |取得日2|取得日3|取得日4|......
| |2020/9/9|2020/9/10|2020/9/15|........

<tbody> <th class ="col-1">今年</th> <th class ="col-1">取得日1</th> <th class ="col-1">取得日2</th> <th class ="col-1">取得日3</th> <th class ="col-1">取得日4</th> ... <tr v-for="(item, index) in syounin_syutoku">{{item.shinseibi}}</tr>

だと
[今年]のカラムに全ての値がはいってしまいます。
何かうまい方法はございませんでしょうか。

Comments

[kai0310]

どのような配列なのか分からないので、配列が分かるように質問投稿を修正してください。

Answer 1

td要素を繰り返すようにすればいいと思いますが、質問で提示されているコードはテーブル要素の構成が正しくありません。
vue.jsとは別にHTMLのテーブルはどう書くのかを学ぶことをお勧めします。

<table>: 表要素 - HTML: HyperText Markup Language | MDN