Question

我正在尝试创建一个钢琴（具有7个八度和88键），并且我有一个img，其中包含12个键。我试图使用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>

有什么想法吗？

Answer 1

您的问题是由您重复使用名称/ 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>

如您在代码的上面输出中所见，有多个具有相同名称的元素。

导致您的错误的原因是，单击您的任何图像都会导致具有该名称的 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忽略了索引，因此您可能以为不是实际的问题。

Answer 2

您不需要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>

Vue JS-带v-for的图像地图区域

2 个答案: