Javascript 如何引用在v-for循环中创建的对象？

在学习VueJS的同时做一个小实验。我的问题是如何引用使用v-for循环创建的标记对象

<gmap-marker
      :key="index"
      v-for="(m, index) in markers"
      :icon="m.icon"
      :position="m.position"
      :clickable="true"
      :draggable="true"
      @click="center=m.position"
    ></gmap-marker>

我计划为每个创建的标记附加一个ID，然后将它们收集到一个对象文本中，ID作为键，marker对象作为值。这样我就可以使用每个标记的id来引用它们

在VueJs中这样做是否正确

---

谢谢

您可以使用

ref

s：

  <gmap-marker
      :key="index"
      v-for="(m, index) in markers"
      :icon="m.icon"
      :position="m.position"
      :clickable="true"
      :draggable="true"
      @click="center=m.position"
      ref="marker"
    ></gmap-marker> <!-- notice the addition of ref="marker" attribute -->

其中，

索引

是一个整数。

[索引]

是必需的，因为您正在

v-for

中使用

ref

快速演示：

Vue.component（'gmap-marker'{
道具：[“图标”]，
模板：“标记{{icon}}”
})
新Vue({
el:“#应用程序”，
数据：{
标记：[{
图标：“aaa”
}, {
图标：“bbb”
}, {
图标：“ccc”
}]
},
方法：{
打印标记（）{
console.log（this.$refs.marker.length）；
}
}
})

在控制台上打印标记引用

尽可能将逻辑排除在模板之外。在模板中使用数据之前，请先对其进行转换。当我从模板中取出逻辑时，您能否举例说明如何进一步改进上述代码？我只是想在组件上使用计算或方法来准备要使用的数据，除非我误解了“创建的标记”。请注意，不是我投了反对票，我只是在分享良好的做法；）没关系，我不担心落选我刚刚开始对VueJs的事情感到困惑，这就是为什么我问是否有合适的方法来做这件事。是否可以使用自定义ID而不是索引？是的，只需执行

：ID=“'foo-bar-'+index”

，例如。（

index

不是必需的，但是您应该生成唯一的

id

s。）另一种可能性：

：id=“m.id”

，考虑到

标记处存在这样的
id
属性：[{id:123，}]

。是的，这就是我要找的。谢谢你的帮助！

this.$refs.marker[index]