Vuejs-v付きのイメージマップエリア-for

debugcn 投稿 Dev

ショーン・ドビル

私はピアノ（7オクターブと88キー）を作成しようとしていますが、img12キーを含むピアノがあります。私はv-for写真を繰り返し、適切なオクターブで音符を演奏しようとしていますが、何らかの理由でvueがループindexからを認識しませんv-for。私のコード：

<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>

何か案は？

Ferrybig

あなたの問題はあなたの名前/ IDの再利用によって引き起こされます、

ループを巻き戻した後の出力は次のようになります。

<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>

上記のコードの出力でわかるように、同じ名前の要素が複数あります。

原因はバグの原因であり、画像のいずれかをクリックすると、その名前の最初の要素がアクティブになるため、常に注1がトリガーされます。

これを解決するには、すべての要素にインデックスに基づいて名前を付けます。

<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>

最初のエントリをアクティブ化するすべての画像は、Vueがインデックスを無視しているように感じるので、実際の問題ではなく、おそらくそれを考えたでしょう。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]