実現したかったこと
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は更新されない
さいごに
他にいい対応方法ありましたら、コメントで指摘して頂けるとありがたいです...