Question

当我在v-for循环中单击某个项目时，我试图触发一个映射框“ flyto（）”方法。我要遍历的数据包括lngLat的对象：{lng：``，lat：''}。

我尝试了几件事，但不确定是否应该将其结构化：

<v-card v-for="(event, index) in eventDetails" :key="index">
    <v-card 
       @click="flyTo(event.lngLat)">

flyTo(lngLat) {
        this.map.flyTo({
          center: [
            lngLat.lngLat.lng,
            lngLat.lngLat.lat
          ], zoom: 16
        })
      }

我还尝试了一些细微的变化（但没有运气），例如：

flyTo(lngLat) {
        this.map.flyTo({
          center: [{
            lng: lngLat.lngLat.lng,
            lat: lngLat.lngLat.lat
          }], zoom: 16
        })
      }

下面仅供参考，是mapbox网站上的一个示例，说明如何构造flyto方法（中心数组中的第一个参数是lng，第二个参数是lat）：

flyTo() {
  this.map.flyTo({
  center: [
    -74.50 + (Math.random() - 0.5) * 10,
     40 + (Math.random() - 0.5) * 10
   ], zoom: 16
  })
},

我显然有这种结构错误。只是不确定应该如何构造（对于编程而言是相当新的）。

我希望将由for循环生成的所选项目的lngLat传递给flyTo方法，以便函数知道在哪里... flyto。

我正在接收的错误（当前）：

[Vue警告] v-on处理程序中的错误：“ TypeError：无法读取未定义的属性'lng'”

并且：

TypeError：无法读取未定义的属性“ lng” 在VueComponent.flyTo

将v-for循环中的对象传递给点击侦听器激活的Vue方法

0 个答案: