다중 요소 선택 Vue.js

다중 요소 선택 Vue.js

jQuery를 Vue로 대체하려고 하니, 단일 Vue 인스턴스에 대해 여러 요소를 선택하는 동안 문제가 발생함.

예를 들어,

내 사이트에는 견인 포스트가 있는데, 거기에는 댓글이 달려 있다.나는 모든 게시물에 대해 vue를 사용하여 댓글 양식을 만들고 싶다.

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>

하지만 여기서 문제는 부에가 첫 번째만 골랐다는 겁니다div.vue-commenting원소의그러니까.

이미지에서 볼 수 있듯이, Vue는 첫 번째 요소에 대해서만 "Add a comment" 버튼을 렌더링했다.

여기 내 Vue 코드:

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
    }
  }
} )

템플릿 코드:

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

vue에서 여러 요소를 선택하려면 어떻게 해야 하는가?

당신은 수업을 제공하고 있다.el마치 그렇게 하면 각각의 일치된 항목에 대해 Vue의 인스턴스가 만들어지지만, 그렇게는 작동하지 않는다.Vue가 제어할 모든 요소를 포함하는 단일 요소를 제공하거나 모든 요소를 반복하여 각각에 대해 새 Vue 인스턴스를 생성하십시오.나는 전자를 강력히 제안할 것이다.

참조URL: https://stackoverflow.com/questions/44764547/vue-js-selecting-multiple-element