Vue.js selecting multiple element

Question

Ich versuche, jQuery durch Vue zu ersetzen, also yeah ein Problem beim Auswählen mehrerer Elemente für eine einzige Vue-Instanz.

Zum Beispiel

Meine Website hat Schlepptau Post, die einen Kommentar Form hat. Ich möchte das Kommentarformular mit vue für alle Posts rendern. Hier

ist die 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> 

Aber das Problem dabei ist, dass nur Vue das erste div.vue-commenting Element auswählen. Wie so,

wie Sie im Bild sehen können, gerendert Vue die Schaltfläche "Kommentar hinzufügen" nur für das erste Element!

Hier ist mein 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> 

Wie soll ich mehrere Elemente in vue wählen?

Answer 1

Sie liefern eine Klasse an el, als würde das eine Instanz von Vue für jedes übereinstimmende Element erstellen, aber es funktioniert nicht so. Sie sollten entweder ein einzelnes Element angeben, das alle Elemente enthält, die Vue steuern soll, oder Sie sollten alle Elemente durchlaufen und für jedes eine neue Vue-Instanz erstellen. Ich würde den ersteren sehr empfehlen.