[Vuejs]-Using VueJS component multiple times on the same page (and it works only the first time…)

by

0👍

✅

This is because a Vue instance will mount on only one DOM element.

So in your case, Vue mounted to the first element match .sendBV.

I suggess use component to solve the problem

1. define component

Vue.component('send-bv', {
  template: `
    <span class='sendBV'>
      <button v-on:click='seen = !seen'> Toggle </button>
      <div v-if='seen'> I'M SEEN </div>
    </span>
  `,
  data: function () {
    return {
      seen: false
    };
  }
});
new Vue({
  el: '#vue-app'
});

2. in your ejs

<div id="vue-app">
    <!-- ...... -->
    <% for (var i = 0; i < data.length; i++) { %>
    <li><%= data[i].id %></li>
    <send-bv></send-bv>
    <% } %>
    <!-- ...... -->
</div>

Full example code: https://codepen.io/iampaul83/pen/XZxrVp

Leave a comment