javascript - Vue.js + SVG map - 如何设置所选项目的样式？

Question

我有 SVG map 和 .selected 类，它为所选省份添加颜色:

.selected {
  fill: brown;
}

我不能直接向 HTML 添加任何方法或事件，因为我将使用不同的 map 。

我在我的方法中使用事件监听器来访问数据并根据点击的省份呈现数据。

我如何使用 .selected 类来做到这一点？因此，如果我单击给定的省份，它会得到一个 .selected 类，如果我单击另一个省份，则前一个会失去 .selected 类？

这是我的代码片段:https://mdbootstrap.com/snippets/jquery/marektchas/507954

Answer 1

您可以通过编程方式添加 .selected 类。

首先添加一个新方法来删除所有路径上的类，然后在单击时为所选元素添加类:

methods: {

  removeSelection (paths) {
    paths.forEach(el => el.classList.remove("selected")) 
  },

  addClickHandler() {
    let paths = this.$el.querySelectorAll('path')
    paths.forEach(el => {
      let id = el.attributes.id.value
      el.addEventListener('click', () => {
        this.province = this.provinces.find(province => province.id == id)

        this.removeSelection(paths)
        el.classList.add("selected")

        // Animation
        this.isActive = true
        setTimeout(() => { this.isActive = false }, 200)
      })
    })
  }
}