获取数组onClick VUE3中对象的索引

Question

我已经为此苦苦挣扎了好几个小时！ 我真的是 vue 新手，vuex...

我想做的很简单：我在一个数组中有多个对象，我想在点击时获取对象的索引，以便稍后获取该对象中的一些信息。

• 我点击列表中的一个项目
• 我得到了索引
• 然后，我得到了一个查找信息的函数（如 myArr[index].values_.geometry.flatCoordiantes）

这是我的清单：

<ul id="features-list">
      <button
        v-for="(feature, index) in filterByTerm"
        :key="index"
        v-on:click="storeCoords($event, index)"
      >
        {{ feature.values_.name }} {{ index }}
      </button>
    </ul>

这是我的计算：

computed: {
    listedFeatures() {
      return this.$store.getters.GET_ALLFEATURES;
    },
    filterByTerm() {
      return this.listedFeatures.filter((feature) => {
        return feature.values_.name
          .toLowerCase()
          .includes(this.searchInput.toLowerCase());
      });
    },
  },

这是我的方法：

 methods: {
    storeCoords(event) {
      // i'd like to access to coordinate of my object to inject it in another variable
      // this.filterByTerm[event.target.index].values_.coordiantes.etc...
      console.log(this.filterByTerm);

    },
  },
};

如您所见，我 console.log filterByTerm，但我不明白我得到如下内容：

(3) [Proxy, Proxy, Proxy]
0: Proxy
[[Handler]]: Object
[[Target]]: Feature

我真的不知道如何在 [[ stuff ]] 中获得一些信息：s 是的，我的 {{index}} 正在显示当前项目的实际索引。 如果有人能帮忙，那就太好了！

提前致谢

Answer 1

您可以将迭代器对象传递给绑定中的click-handler：

<button v-on:click="storeCoords(feature, index)">

然后从对象参数中访问坐标：

export default {
  methods: {
    storeCoords(feature, index) {
      // assuming the coordinates are stored in `coordinates` prop
      console.log(feature.coordinates)
    }
  }
}