[Vuejs]-Custom event on each ref within for loop Vuejs

by

0👍

First thing, your ref is not dynamic, it’s a string. So make it dynamic by binding this using the bind (v-bind or :) operator.

Second thing, mustaches cannot be used inside HTML attributes, so {{loop.index}} won’t work.

Here is the demo-

new Vue({
  el: "#app",
  mounted() {
    Object.keys(this.$refs).map((val) => console.log(val))
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="index in 5" :ref="`vuemodal-${index}`">
    It's a bootstrap modal and to each of them I want to bind an event whenever I close the modal
  </div>
</div>

Leave a comment