I'm trying to replace jQuery with Vue, so yeah facing an issue while selecting multiple elements for a single Vue instance.

For example,

My site has tow post, that has a ment form. I want to render the ment form using vue for all the posts.

Here is the HTML:

<div class="post">
  <h1>This is first post</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, delectus, vero! 
    Aut adipisci fuga, dolorem optio sunt mollitia, debitis eius magni totam sint harum provident ipsa, 
    corporis eligendi dolorum hic!
  </p>
  <hr>
  <div class="vue-menting"></div>
</div>

<div class="post">
  <h1>This is second post</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, delectus, vero! 
    Aut adipisci fuga, dolorem optio sunt mollitia, debitis eius magni totam sint harum provident ipsa, 
    corporis eligendi dolorum hic!
  </p>
  <hr>
  <div class="vue-menting"></div>
</div>

But the problem here is that, Vue only selecting the first div.vue-menting element. Like so,

as you can see in the image, Vue rendered the "Add a ment" button only for the first element!

Here is my Vue code:

let app = new Vue( {
  el: '.vue-menting',
  template: '#add-ment-template',
  data: {
    message: 'Commenting going here ...',
    visibleForm: false
  },
  methods : {
    ToggleReplyForm: function ( event ) {
      event.preventDefault()
      this.visibleForm = ! this.visibleForm
    }
  }
} )

Template Code:

<script type="text/x-template" id="add-ment-template">
  <div>
    <a 
      href="#"
      class="btn btn-success"
      v-on:click="ToggleReplyForm">
      Add a ment
    </a>
    <div class="clearfix"></div>

    <br/>

    <div 
      v-if="visibleForm"
      class="panel panel-default">

      <div class="panel-heading">
        Comment Form
      </div>
      <div class="panel-body">
        <div class="form-group">
          <label for="un">Name</label>
          <input type="text" class="form-control" id="un">
        </div>
        <div class="form-group">
          <label for="uc">Comment</label>
          <textarea class="form-control" id="uc" rows="3"></textarea>
        </div>
      </div>
      <div class="panel-footer">
        <button
          class="btn btn-warning">
          Post Comment
        </button>
      </div>
    </div>

  </div>
</script>

How should I select multiple elements in vue?

I'm trying to replace jQuery with Vue, so yeah facing an issue while selecting multiple elements for a single Vue instance.

For example,

My site has tow post, that has a ment form. I want to render the ment form using vue for all the posts.

Here is the HTML:

<div class="post">
  <h1>This is first post</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, delectus, vero! 
    Aut adipisci fuga, dolorem optio sunt mollitia, debitis eius magni totam sint harum provident ipsa, 
    corporis eligendi dolorum hic!
  </p>
  <hr>
  <div class="vue-menting"></div>
</div>

<div class="post">
  <h1>This is second post</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, delectus, vero! 
    Aut adipisci fuga, dolorem optio sunt mollitia, debitis eius magni totam sint harum provident ipsa, 
    corporis eligendi dolorum hic!
  </p>
  <hr>
  <div class="vue-menting"></div>
</div>

But the problem here is that, Vue only selecting the first div.vue-menting element. Like so,

as you can see in the image, Vue rendered the "Add a ment" button only for the first element!

Here is my Vue code:

let app = new Vue( {
  el: '.vue-menting',
  template: '#add-ment-template',
  data: {
    message: 'Commenting going here ...',
    visibleForm: false
  },
  methods : {
    ToggleReplyForm: function ( event ) {
      event.preventDefault()
      this.visibleForm = ! this.visibleForm
    }
  }
} )

Template Code:

<script type="text/x-template" id="add-ment-template">
  <div>
    <a 
      href="#"
      class="btn btn-success"
      v-on:click="ToggleReplyForm">
      Add a ment
    </a>
    <div class="clearfix"></div>

    <br/>

    <div 
      v-if="visibleForm"
      class="panel panel-default">

      <div class="panel-heading">
        Comment Form
      </div>
      <div class="panel-body">
        <div class="form-group">
          <label for="un">Name</label>
          <input type="text" class="form-control" id="un">
        </div>
        <div class="form-group">
          <label for="uc">Comment</label>
          <textarea class="form-control" id="uc" rows="3"></textarea>
        </div>
      </div>
      <div class="panel-footer">
        <button
          class="btn btn-warning">
          Post Comment
        </button>
      </div>
    </div>

  </div>
</script>

How should I select multiple elements in vue?

• javascript
• vue.js
• vuejs2

• Perhaps this answer can help stackoverflow./a/31882776/2399208 – camden Commented Jun 26, 2017 at 16:45
• I can see few issues here mainly you are using a class as view el tag. Can help further if you can share your template as well. – CuriousGuy Commented Jun 26, 2017 at 18:03
• @charith Added template code – rakibtg Commented Jun 26, 2017 at 18:08

1 Answer 1

You're supplying a class to el as if that will create an instance of Vue for each matched item, but it doesn't work like that. You should either supply a single element that includes all of the elements you want Vue to control, or you should loop through all the elements and create a new Vue instance for each. I would strongly suggest the former.