こんにちは、ほそ道です。 今回、v-repeatのネストについて自分なりに学んだ情報をまとめてみます。 最終的には下記のような入れ子構造のリストに仕上げたいと思います。 ViewModel生成編 ディレクティブ編 インスタンスメンバ編 グローバルメソッド編 フィルター編 v-repeatネスト編 全体の目次はこちら 1階層のリスト まずv-repeatにバインドできるデータとしては配列かオブジェクトが許容されています。 今回やりたい入れ子のような構造的なデータを使う場合、 v-repeatには配列を指定し、その配列の中にオブジェクトを指定する。 という形が良いかと思います。 それではやってみましょう <div id="city"> <ul> <li v-repeat="todohuken"> {{name}} </li> </ul> </div> <script src="js/vue.j
![体で覚えるVue.js - v-repeatネスト編 〜 JSおくのほそ道 #027 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b37f601c38e052951e55025764a6b0a5ee1e378/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU0JUJEJTkzJUUzJTgxJUE3JUU4JUE2JTlBJUUzJTgxJTg4JUUzJTgyJThCVnVlLmpzJTIwLSUyMHYtcmVwZWF0JUUzJTgzJThEJUUzJTgyJUI5JUUzJTgzJTg4JUU3JUI3JUE4JTIwJUUzJTgwJTlDJTIwSlMlRTMlODElOEElRTMlODElOEYlRTMlODElQUUlRTMlODElQkIlRTMlODElOUQlRTklODElOTMlMjAlMjMwMjcmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWI3M2RhZTkyZTk1ZThkYzY5ZDYyZWVmMjJjMjcxNDhh%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob3NvbWljaGkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU5NmIwNWE2NTk0MDIzMzEwMzY3MDY3YzQ5ZjY1ZjRh%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pcG9z5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dee24872e7a655c7badfd51ceee697821)