Vue.jsでv-forのネストができない

Question

データは以下

        myobject: [
          [
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
          ],
          [
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
          ],
          [
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
            ["k", "v"], ["k", "v"],
          ]
        ]

HTMLは以下

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

このようにするとReferenceError: item is not definedとなってしまいます。

Vue.jsでは配列のループをネストすることはできないのでしょうか？

方法がありましたらぜひご回答よろしくお願いします！

Answer 1

htmlで<li>の子要素に<li>を置くことはできません。

では実際そうなっているときブラウザはどうするかというのが仕様で決まっているかは知らないですが、質問文のコードをchromeで試したところ以下のようになりました(vue の実行前)。

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

この後 vue が実行されると当然itemは参照エラーになります。

Comments

[kurosuke___]

あ、liの中にはulを置かないとダメでしたね・・・初歩的ミスでした・・・
ありがとうございます！