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

2017/04/06

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

前回はVue.jpで、テキストボックスに文字をタイピングするたびに別の場所に文字が現れる方法を紹介しました。今回は、テキストボックスに入力したデータを配列データに追加し、その配列データをリスト表示する方法を紹介します。まずは今回の完成形今回の完成形の動きを動画でお見せします。TitleとURLのテキストボックスに値を入力すると上のリストに追加されます。裏ではもともと存在する２つの配列データを持っていて、それに突っ込んだと同時に表示させるようになっています。https://youtu.be/by58S7Kn5hkソースコードソースコー...

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

[ad#top-1]

1 まずは完成形
2 データ構造
3 全体のソースコード

まずは完成形

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

データ構造

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

以下の通り、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>

[ad#ad-1]

- HTML/JavaScript