非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

Vue.jsでデータをツリー構造で表示させるには

   

前にVue.jsで配列データをリスト表示する方法を書きました。

 

この時はループ処理(v-for)を使って一覧表示するだけでしたが、今回はツリー表示させる方法を紹介します。

広告

まずは完成形

まずは完成形です。以下の通りブラウザで開くカテゴリごとにツリー図で表示されます。ちょっとブックマークを意識して作ってみました。

 

データ構造

ソースコードを紹介する前に、ツリー図で表現するためにデータをツリーに合った構造にする必要があります。

以下の通り、foldersという親配列があって、各データの名前(name)に加え、pagesという子配列が組み込まれています。このようなデータ構造にすることでツリー図にしやすくできます。

data: {
  folders: [
    { name: '検索', pages: [{name: 'Google'}, {name: 'Yahoo!'}, {name: 'goo!'}] },
    { name: 'SNS', pages: [{name: 'Facebook'}, {name: 'Twitter'}, {name: 'Google+'}, {name: 'mixi'}] },
    { name: 'Shpping', pages: [{name: 'Amazon'}, {name: 'ヤフオク'}, {name: 'ebay'}, {name: '楽天'}] }
  ]
}
 

 

上のデータをツリー図にするHTMLは以下の通りです。

まずはfolder配列をループし、その中でpage配列をループさせていることがわかると思います。

<ul>
  <li v-for="folder in folders">
    {{ folder.name }}
    <ul>
      <li v-for="page in folder.pages">
        {{ page.name }}
      </li>
    </ul>
  </li>
</ul>
 

 

全体のソースコード

全体のソースコードはこちら


<!DOCTYPE html>
<html>
<head>
  <title>Vue.js ツリー図</title>
</head
<body>
  <div id="example-2">
    <ul>
      <li v-for="folder in folders">
        {{ folder.name }}
        <ul>
          <li v-for="page in folder.pages">
            {{ page.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<script>
  var example2 = new Vue({
    el: '#example-2',
    data: {
      folders: [
        { name: '検索', pages: [{name: 'Google'}, {name: 'Yahoo!'}, {name: 'goo!'}] },
        { name: 'SNS', pages: [{name: 'Facebook'}, {name: 'Twitter'}, {name: 'Google+'}, {name: 'mixi'}] },
        { name: 'Shpping', pages: [{name: 'Amazon'}, {name: 'ヤフオク'}, {name: 'ebay'}, {name: '楽天'}] }
      ]
    }
  })
</script>
</html>
 

.

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - HTML/JavaScript