将 prop 值传递给 svg Vue.js 组件中动态构建的点击事件答案

【问题标题】：Pass prop value to dynamically built click event in svg Vue.js component将 prop 值传递给 svg Vue.js 组件中动态构建的点击事件
【发布时间】：2020-11-15 09:22:04
【问题描述】：

我正在从 JSON 数组创建一个地图组件，并向每个项目添加一个单击事件处理程序。单击事件将切换 css 样式以为项目着色。这工作正常。不过，我想做的是选择要从道具切换的颜色。但是，该值仅在创建函数时设置，而不是在触发时设置。在执行点击事件功能时，我不确定如何获得道具“pickColour”的当前值。或者，如果我使用箭头函数，如何找到“this.node”的等价物？

这是我的组件，

<template>
  <div>
    <div>{{pickColour}}</div>
    <div :id="svgId" class="svg-container"></div>
  </div>
</template>

<script>
import myMap from "../assets/MainMap";
export default {
  name: "VenueMapComponent",
  props: {
    pickColour: String,
  },
  data: function () {
    return {
      svgId: "myMap",
      mapAttr: {
        viewBoxWidth: 1000,
        viewBoxHeight: 2500,
        imageWidth: 1000,
        imageHeight: 2500,
      },
      svgContainer: null,
    };
  },
  mounted: function () {
    this.generateVenueMap();
  },
  methods: {
    generateVenueMap: function () {
      const vue = this;
      const mapData = myMap.g.path;
      const svgContainer = vue
        .$svg("myMap")
        .size("100%", "100%")
        .viewbox(-200, 0, vue.mapAttr.viewBoxWidth, vue.mapAttr.viewBoxHeight);
      vue.svgContainer = svgContainer;
      mapData.forEach((pathObj) => {
        vue.generatePath(svgContainer, pathObj);
      });
    },
    generatePath: function (svgCont, pathObj) {
      const vue = this;
      const attrs = {
        title: pathObj["-title"],
        "map-id": pathObj["-id"],
      };
      const element = svgCont.path(pathObj["-d"]).attr(attrs);

      let mapId = "";
      let title = "";
      element.click(function () {
        mapId = this.node.attributes["map-id"].value;
        title = this.node.attributes["title"].value;

        // need a way to set string from property
        this.node.classList.toggle("def");
        ////

        vue.$emit("map-clicked", { mapId, title });
      });
      element.mouseover(function () {
        mapId = this.node.attributes["map-id"].value;
        title = this.node.attributes["title"].value;
        this.node.classList.add("on");
        //     vue.$emit("map-over", { mapId, title });
      });
      element.mouseout(function () {
        mapId = this.node.attributes["map-id"].value;
        title = this.node.attributes["title"].value;
        this.node.classList.remove("on");
        //     vue.$emit("map-over", { mapId, title });
      });
    },
  },
};
</script>
<style>
path {
  fill: #adaf93;
  stroke: white;
}
path.on {
  fill: rgb(221, 221, 103);
  stroke: rgb(128, 98, 16);
}
path.abc {
  fill: rgb(47, 80, 48);
  stroke: rgb(25, 100, 71);
}
path.abc.on {
  fill: rgb(102, 182, 104);
  stroke: rgb(25, 100, 71);
}
path.def {
  fill: rgb(22, 36, 156);
  stroke: rgb(25, 100, 71);
}
path.def.on {
  fill: rgb(94, 92, 216);
  stroke: rgb(25, 100, 71);
}
</style>

【问题讨论】：

标签： javascript css vue.js svg events

【解决方案1】：

当然，我是在发帖后马上做的！箭头功能是要走的路，如果其他人需要它，

element.click(() => {
    mapId = element.node.attributes["map-id"].value;
    title = element.node.attributes["title"].value;

        // need a way to set string from prop value
    element.node.classList.toggle(this.pickColour);

});

【讨论】：