Vue js - image map area with v-for

Question

I'm trying to create a piano (which has 7 octaves and 88 keys) and i have a img that contains 12 keys. i'm trying to use v-for to iterate over the pictures and play notes in their fitting octave, but for some reason vue doesn't recognize the index from my v-for loop. my code:

<div v-for="(k, i) in keys" :key="k.id">
        {{i+1}}
        <img :src="k" alt="" usemap="#piano-map">
        <map name="piano-map" :key="k.id">
            <area target="" alt="k" title="k" @click="piano.note('c'+ parseInt(i+1)).play()" coords="2,0,81,267" shape="rect">
        </map>
    </div>

any ideas?

Answer 1

Your problem is cause by your re-use of names/ids's,

The output after unwinding the loop goes like:

<div>
    1
    <img :src="keys[0]" alt="" usemap="#piano-map">
    <map name="piano-map" :key="keys[0].id">
        <area target="" alt="k" title="k" @click="piano.note('c'+ parseInt(1)).play()" coords="2,0,81,267" shape="rect">
    </map>
</div>
<div>
    2
    <img :src="keys[1]" alt="" usemap="#piano-map">
    <map name="piano-map" :key="keys[1].id">
        <area target="" alt="k" title="k" @click="piano.note('c'+ parseInt(2)).play()" coords="2,0,81,267" shape="rect">
    </map>
</div>

As you can see in the above output of your code, there are multiple elements with the same name.

The causes your bug, clicking on any of your images causes the first element with that name to activate, so it always triggers note 1.

To solve this, give every element an name based on their index:

<div v-for="(k, i) in keys" :key="k.id">
    {{i+1}}
    <img :src="k" alt="" :usemap="'#piano-map-' + i">
    <map :name="'#piano-map-' + i" :key="k.id">
        <area target="" alt="k" title="k" @click="piano.note('c'+ parseInt(i+1)).play()" coords="2,0,81,267" shape="rect">
    </map>
</div>

Since every image activating the first entry feels like Vue is ignoring your index, you probably thought that instead of the actual problem.