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

【问题标题】：Vue js - image map area with v-forVue js - 带有 v-for 的图像映射区域
【发布时间】：2019-03-25 22:45:50
【问题描述】：

我正在尝试创建一个 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>

有什么想法吗？

【问题讨论】：

k 变量中的内容，第 3 行建议它是一个字符串，因为:src 接受一个字符串，但在第 4 行，您使用它的一个属性，建议它是一个对象

标签： html vue.js vuejs2 vue-component area

【解决方案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 忽略了您的索引，您可能认为这是实际问题而不是实际问题。

【讨论】：

【解决方案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>

【讨论】：

我使用 parseInt 因为我需要在音符上加一（八度从 1 开始而不是零）。我也尝试在标签内的不同位置记录 i，但它不起作用，仅在它之外......
在从元素的 @click 调用的函数内部记录 i 时，无论它是可迭代的，我总是得到 0。
不客气，问题是名字的唯一性？
是的，在钢琴地图中，它们都指的是同一个......真是个愚蠢的错误?
它现在可以完美运行，使用 parseInt(i+1) 哈哈，这使它内联并且更方便...