Question

在学习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中作为关键字并将标记对象作为值的对象文字中收集它们。这样我就可以使用他们的id来引用每个标记。

在VueJs中这样做是否正确？

谢谢！

Answer 1

您可以使用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 -->

以后参考使用：

this.$refs.marker[index]

index是整数。 [index]是必要的，因为您在ref中使用v-for。

快速演示：

Vue.component('gmap-marker', {
  props: ['icon'],
  template: '<div>marker {{ icon }}</div>'
})

new Vue({
  el: '#app',
  data: {
    markers: [{
      icon: 'aaa'
    }, {
      icon: 'bbb'
    }, {
      icon: 'ccc'
    }]
  },
  methods: {
    printMarkers() {
      console.log(this.$refs.marker.length);
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="app">
  <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>
  <hr>
  <button @click="printMarkers">Print Marker Refs at Console</button>
</div>

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

1 个答案: