Vue.js 状態管理用の変数を実装してみた

6797 ワード
Vue.js 変数 JavaScript JavaScript テキストリンク

実現したかったこと

aタグなどの要素としては同じだが遷移先が異なるものについてcomponent化
生成した数に応じて、表示位置を制御するクラスを適用する

実装

index.html
<!-- // ... -->
   <body>
        <!-- // ... -->

        <vue_header></vue_header>

        <!-- // ... -->
    </body>
    
    <script type="text/javascript">
        Vue.component('vue_a', {
            props: [
                'list',
                'position_class',
            ],
            template: `
                <a
                    v-bind:class="position_class"
                    v-bind:href="list.href"
                >
                    {{ list.name }}
                </a>
            `,
        });
        
        Vue.component('vue_header', {
            beforeCreate: function () {
                this.count = 0;
            },
            data: function () {
                return {
                    lists: [
                        {
                            href: "/href1",
                            name: "リンク1",
                        },
                        {
                            href: "/href2",
                            name: "リンク2",
                        },
                        {
                            href: "/href3",
                            name: "リンク3",
                        },
                    ],
                };
            },
            methods: {
                getPositionClass: function () {
                    if (this.count < 2) {
                        this.count++;
    
                        return "left";
                    } else {
                        this.count++;
    
                        return "right";
                    }
                }
            },
            template: `
                <header>
                    <div>
                        <vue_a 
                            v-for="(list, index) in this.lists"
                            v-bind:key=index
                            v-bind:list=list
                            v-bind:position_class="getPositionClass()"
                        >
                        </vue_a>
                    </div>
                </header>
            `,
        });

        <!-- // ... -->
    </script>

<!-- // ... -->

つまずいたところ

vue_headerのdata内にcountを保持していたが、
countの更新と共にtemplateが再描画されてしまう

beforeCreate内で変数初期化することで、
処理内で更新してもtemplateは更新されない

さいごに

他にいい対応方法・至らぬ点ありましたら、コメントで指摘して頂けるとありがたいです...