Vue.js/ファイラーっぽいUIを作ってみる/040_データを作る

HTML で作った階層のリスト構造と同一構造のJavaScript オブジェクトを作る。

var data = {
    id: 1, name: "", type: "folder",
    items: [
        {
            id: 2, name: "aaa", type: "folder",
            items: [
                { id: 3, name: "bbb", type: "file" },
                { id: 4, name: "ccc", type: "file" },
                { id: 5, name: "ddd", type: "file" }
            ]
        },
        { id: 6, name: "eee", type: "file" },
        {
            id: 7, name: "fff", type: "folder",
            items: [
                { id: 8, name: "ggg", type: "file" },
                {
                    id: 9, name: "hhh", type: "folder",
                    items: [
                        { id: 10, name: "iii", type: "file" },
                        { id: 11, name: "jjj", type: "file" }
                    ]
                }
            ]
        },
        { id: 12, name: "kkk", type: "file" }
    ]
};

リストが含むデータはすべて盛り込めたと思う。データを特定したいのでそこには id という連番をふっておいた。

それを Vue のデータとして登録する

var vm = new Vue({
    el: "#app",
    data: data
});

これで Vue の管理下にデータ管理のためのオブジェクトが入ったということになる。

next: Vue.js/ファイラーっぽいUIを作ってみる/050_テンプレートを作る

Tips

ちなみに JavaScript でオブジェクトを作る際にキーに対しその値に変数の中の値を使いたい場合、このように書くが

var data = "aaa";
var hoge = {
    data: data
};

変数と同名のキーでその値を登録する場合は、このように書くことが許されている。

var data = "aaa";
var hoge = {
    data
};

気持ち悪い気がするが、Vue.js では非常に多用してくるのでおぼえておいたほうがよいだろう

まとめ

今回までのまとめ

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello</title>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://unpkg.com/vuex@latest"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li class="folder">
                <h2>aaa</h2>
                <ul>
                    <li class="file">bbb</li>
                    <li class="file">ccc</li>
                    <li class="file">ddd</li>
                </ul>
            </li>
            <li class="file">eee</li>
            <li class="folder">
                <h2>fff</h2>
                <ul>
                    <li class="file">ggg</li>
                    <li class="folder">
                        <h2>hhh</h2>
                        <ul>
                            <li class="file">iii</li>
                            <li class="file">jjj</li>
                        </ul>
                    </li>
                </ul>
             </li>
             <li class="file">kkk</li>
        </ul>
    </div>
    <script>
        // ■■■■■■■■ 今回はここ
        var data = {
            id: 1, name: "", type: "folder",
            items: [
                {
                    id: 2, name: "aaa", type: "folder",
                    items: [
                        { id: 3, name: "bbb", type: "file" },
                        { id: 4, name: "ccc", type: "file" },
                        { id: 5, name: "ddd", type: "file" }
                    ]
                },
                { id: 6, name: "eee", type: "file" },
                {
                    id: 7, name: "fff", type: "folder",
                    items: [
                        { id: 8, name: "ggg", type: "file" },
                        {
                            id: 9, name: "hhh", type: "folder",
                            items: [
                                { id: 10, name: "iii", type: "file" },
                                { id: 11, name: "jjj", type: "file" }
                            ]
                        }
                    ]
                },
                { id: 12, name: "kkk", type: "file" }
            ]
        };
        var vm = new Vue({
            el: "#app",
            data: data  // ■■■■■■■■ 今回はここ
        });
    </script>
</body>
</html>

javascript/vuejs/create_filer_like_ui/040_create_data.txt · 最終更新: 2018-11-22 13:56 by ore

文書の先頭へ

Vue.js/ファイラーっぽいUIを作ってみる/040_データを作る

menu

書いてる野郎

Vue.js/ファイラーっぽいUIを作ってみる/040_データを作る

Tips

まとめ