将prop值传递给svgVue.js组件中动态构建的点击事件

Question

我正在从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>

Answer 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);
});