vueのイテレーションがjavascriptと違った話。

好きなプリキュアシリーズはハグっとプリキュア。えぬわいです。

vueのv-forディレクティブとjavascriptのforが個人的にだいぶ違ってて、イライラしてしまったんですよね。javascriptの時は、

const dict = { a: 'x', b: 'y'}
for (const x in dict) {
    console.log(x)
}

これは、

a
b

となるので、すなわち、key を取り出してるんですよね。配列の場合は、x は、添字、インデックスになるんですけど、v-forの場合は、

<p v-for="x in dict" :key="x">
{{ x }}
</p>

とすると、

<p>x</p>
<p>y</p>

が生まれるんですよね。しかもofも同じ動作をするっていう謎仕様。2 つもいる？？？jsと同じようにすればいいのに。

んで、vueのv-forで、keyを引っ張り出すには、

<p v-for="(value, key) in dict">
{{ key }}: {{ value }}
</p>

この方法しかないみたいだ。もう！！！！

常に、2 つ取り出せるということを覚えといた方が良さそうだ。