如何使用Vue.js从SVG映射访问数据

我使用奥地利的SVG地图。每个省都有title属性，其中包含省的名称

[下面的片段中提供了完整示例]

在HTML中的地图之外，我有一个段落，我想在其中显示用户单击的省的名称

{{省}

我怎样才能做到这一点

以下是我的代码片段：

如果可以更改svg部分，则可以在每个路径上添加单击事件：

最新答案

如果您有许多省份，您可以通过选择所有选择器或类名或您认为与您的案例相关的任何选择器来添加装载时的单击事件：

new Vue({
  el: '#app',
  data: {
    province: null
  },
  mounted () {
    this.addClickHandler()
  },
  methods: {
    setProvince (title) {
      this.province = title
    },
    addClickHandler () {
      let paths = this.$el.querySelectorAll('path')
      paths.forEach(el => {
        let title = el.attributes.title.value
        el.addEventListener('click', () => {
          this.setProvince(title)
        })
      })
    }
  }
});

这样就不再需要@click-in模板了。

---

您需要了解事件委派。您应该能够将事件处理程序附加到svg根目录，并获取svg中任何元素的事件

---

在每个省添加一个单独的@click事件，特别是当地图包含数百个时，这似乎不是一个好的做法。但是，我用完全相同的代码尝试了您的解决方案，但没有成功work@MarekHas如果您有许多省份，可以在其上添加事件侦听器。我用一个正在运行的实例更新了我的答案。还有一个问题。如果要显示SVG元素中的其他数据，代码应该是什么样子？例如，如果我还想在{{ID}}元素中显示ID属性的值？因此，如果我单击省，它将在分隔的{ID}中显示省的名称和它的ID。您可以添加数据ID:null，并在forEach循环中检索ID，如：let ID=el.ID。然后您可以执行el.addEventListener'click'，=>{this.province=title this.id=id}，这样就不需要setProvince方法了。更新小提琴

methods: {
  setProvince (title) {
    this.province = title
  }
}

new Vue({
  el: '#app',
  data: {
    province: null
  },
  mounted () {
    this.addClickHandler()
  },
  methods: {
    setProvince (title) {
      this.province = title
    },
    addClickHandler () {
      let paths = this.$el.querySelectorAll('path')
      paths.forEach(el => {
        let title = el.attributes.title.value
        el.addEventListener('click', () => {
          this.setProvince(title)
        })
      })
    }
  }
});