Vue.js selecting multiple element

Question

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 comment form. I want to render the comment 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-commenting"></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-commenting"></div>
</div>

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

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

Here is my Vue code:

let app = new Vue( {
  el: '.vue-commenting',
  template: '#add-comment-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-comment-template">
  <div>
    <a 
      href="#"
      class="btn btn-success"
      v-on:click="ToggleReplyForm">
      Add a comment
    </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?

Perhaps this answer can help stackoverflow.com/a/31882776/2399208 — camden
– 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
– CuriousGuy, Commented Jun 26, 2017 at 18:03

Roy J · Accepted Answer · 2017-06-26 17:09:21Z

7

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.

answered Jun 26, 2017 at 17:09

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js selecting multiple element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related