コリラボ

技術の学びの備忘録

Vue.js

v-forで入れ子の情報を表示する

v-forで入れ子の情報を表示する

v-forを2つ使ってリスト表示をしてみたいと思います。

    <div id="app">
        <div v-for="store in stores" :key=store.index>
          <h2>  {{store.name}}</h2>
          <ul>
          <li v-for='item in store.items' :key=item.index>{{item.name}}</li>
          </ul>
        </div>
    </div>

ハマったポイント

<h2 v-for="store in stores" :key=store.index> {{store.name}}</h2>で書けそう。 よく考えたらインライン要素だし。。 :key=item.index:key=store.item.indexだと表示されない。

スクリプト側の書き方

<script>
    var example = new Vue({
      el: '#app',
      data: {
        stores: [
                {
                  "name": "マクドナルド",
                  "items":[
                          {
                            "name": "ハンバーガー"
                          },
                          {
                            "name": "チーズバーガー",
                          },
                          ]
                },
                {
                  "name": "モスバーガー",
                  "items": [
                            {
                            "name": "モスバーガー",
                          },
                          {
                            "name": "モスチーズバーガー",
                          },
                        ]
                },

              ]
      }
    })
  </script>

ハマったポイント

                  "name": "マクドナルド",
                  "items":
                          {
                            "name": "ハンバーガー"
                          },
                          {
                            "name": "チーズバーガー",
                          },
                },

で書けそう。無理。[]で括ろう。

完成コード

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <div id="app">
        <div v-for="store in stores" :key=store.index>
          <h2>  {{store.name}}</h2>
          <ul>
          <li v-for='item in store.items' :key=item.index>{{item.name}}</li>
          </ul>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

  <script>
    var example = new Vue({
      el: '#app',
      data: {
        stores: [
                {
                  "name": "マクドナルド",
                  "items":[
                          {
                            "name": "ハンバーガー"
                          },
                          {
                            "name": "チーズバーガー",
                          },
                          ]
                },
                {
                  "name": "モスバーガー",
                  "items": [
                            {
                            "name": "モスバーガー",
                          },
                          {
                            "name": "モスチーズバーガー",
                          },
                        ]
                },

              ]
      }
    })
  </script>
  </body>
</html>