vue 配列でテーブルを生成

初歩的な質問ですいません、、
下記のデータをテーブルとして出力したいのですが、
うまくいきません。。

//data

 bodies: {
		rows: [
			[
				{ width: "70%" },
				{ name: "aaaaa" },
			],
			[
				{ width: "10%" },
				{ name: "bbbbb" },
			],
			[
				{ width: "10%" },
				{ name: "ccccc" },
			],
			[
				{ width: "10%" },
				{ name: "ddddd" },
			],
		],
		rows: [
			[
				{ width: "70%" },
				{ name: "aaaaa" },
			],
			[
				{ width: "10%" },
				{ name: "bbbbb" },
			],
			[
				{ width: "10%" },
				{ name: "ccccc" },
			],
			[
				{ width: "10%" },
				{ name: "ddddd" },
			],
		],
	};

<tr v-for="body in bodies">
 <td v-for="r in body">{{r.name}}</td>
</tr>

上記ですと特に何も出力されません。。

試したコード

//1
<tr v-for="body in bodies.rows">
 <td v-for="r in body">{{r.name}}</td>
</tr>

//2
<tr v-for="body in bodies">
 <td v-for="r in body.rows">{{r.name}}</td>
</tr>

上記ですとエラーのため通りません。。
なんかそもそもデータの形も間違っているのかもしれませんが、
どちらがおかしいでしょうか・・？

行動規範の内容に同意します

回答2件

ベストアンサー

bodiesのデータ構造を修正するといいと思います。
JavaScriptのオブジェクトでは同じ名前のkey（今の場合はrows）を使うことができません。
なので、テーブルの構造を二次元配列（配列の中に配列を入れます）で表現してあげるといいです。

こんな感じのコードにすると、テーブルの行が表示されます。

vue
1<div id="app">
2  <table>
3    <tr v-for="row in rows">
4      <td v-for="r in row">{{ r.name }}</td>
5    </tr>
6  </table>
7</div>

js
1new Vue({
2  el: "#app",
3  data: function() {
4    return {
5      rows: [
6        [
7          { width: "70%" }, { name: "aaaaa" },
8          { width: "10%" }, { name: "bbbbb" },
9          { width: "10%" }, { name: "ccccc" },
10          { width: "10%" }, { name: "ddddd" }
11        ],
12        [
13          { width: "70%" }, { name: "aaaaa" },
14          { width: "10%" }, { name: "bbbbb" },
15          { width: "10%" }, { name: "ccccc" },
16          { width: "10%" }, { name: "ddddd" }
17        ]
18      ]
19    };
20  }
21});
22