Vue JS - область изображения карты с V-для - PullRequest
Новая
       10

Vue JS - область изображения карты с V-для

0 голосов
/ 21 октября 2018

Я пытаюсь создать фортепиано (которое имеет 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>

есть идеи?

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

Ваша проблема вызвана повторным использованием имен / идентификаторов,

Вывод после разматывания цикла выглядит следующим образом: 

<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 игнорирует ваш индекс, вы, вероятно, подумали, чтовместо актуальной проблемы.

0 голосов
/ 21 октября 2018

Вам не нужно 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>
...