Vue js - 带有 v-for 的图像映射区域

Question

我正在尝试创建一个 piano（它有 7 个八度音阶和 88 个键）并且我有一个包含 12 个键的 img。我正在尝试使用 v-for 遍历图片并在其合适的八度音阶中播放音符，但出于某种原因，vue 无法识别我的 v-for 循环中的 index。我的代码：

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

有什么想法吗？

Answer 1

您不需要 parseInt(i+1) i 已经是一个整数您可以直接将其用作参数，如下所示：

    <area target="" alt="k" title="k" @click="piano.note(i).play()" coords="2,0,81,267" shape="rect">

并在您的方法中像这样使用它：

  note(i){
     var i=i+1;
     var c='c'+i;
     ....
  }

您必须为每个地图创建唯一的名称，如下所示：

new Vue({
  el: '#app',
  data: {
   },
   methods:{
      note(i){
      console.log(i)
      }
   }
})

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

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

Answer 2

您的问题是由于您重复使用 names/ids 的，

展开循环后的输出如下：

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

正如您在上面的代码输出中看到的，有多个同名元素。

导致您的错误的原因是，单击您的任何图像都会导致具有该名称的 first 元素被激活，因此它总是会触发注释 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 忽略了您的索引，您可能认为那而不是实际问题。

Vue js - 带有 v-for 的图像映射区域

Vue js - image map area with v-for

html

area

vue.js

vue-component

vuejs2