Vue.js 选择多个元素

Posted 2023-02-22

【中文标题】Vue.js 选择多个元素

【英文标题】：Vue.js selecting multiple element

【发布时间】：2017-11-29 13:53:18

【问题描述】：

我正在尝试用 Vue 替换 jQuery，所以在为单个 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>

但是这里的问题是，Vue 只选择了第一个 div.vue-commenting 元素。像这样，

如图所示，Vue 只为第一个元素渲染了“添加评论”按钮！

这是我的 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中如何选择多个元素？

【问题讨论】：

也许这个答案可以帮助***.com/a/31882776/2399208

我可以在这里看到一些问题，主要是您使用类作为视图 el 标记。如果您也可以共享您的模板，可以提供更多帮助。

@charith 添加了模板代码

【参考方案1】：

您正在向el 提供一个类，就好像它会为每个匹配的项目创建一个 Vue 实例，但它不是那样工作的。您应该提供一个包含您希望 Vue 控制的所有元素的单个元素，或者您应该遍历所有元素并为每个元素创建一个新的 Vue 实例。我强烈建议前者。