Vue.js 如何将活动类添加到特定元素？

我有以下方法：

  methods: {

          replyBox: function(e){
            e.preventDefault();
             this.isActive = !this.isActive;
           );
         },

我认为：

<div class="comment_list" v-for="comment in all_comments">
<a href="#" class="initial" v-on:click="replyBox">REPLY</a>

   <div id="reply-box-@{{comment.id}}" class="reply-box" v-bind:class="{active: isActive}">
             <div class="user_comment row">
               <div class="col-md-1 col-sm-1 col-xs-1">
                 <div class="user_profile_image {{ isset($current_user->personal_user) ? 'bg_blue' : 'bg_green'}}">
                   @if(isset($current_user->avatar) && $current_user->avatar != '')
                   <img src="{{ avatar_path($current_user->avatar)}}" alt="" />
                 @else
                   <img src="{{ home_asset('img/user_icon.png') }}" alt="" />
                 @endif
                 </div>
               </div>
               <div class="col-md-11 col-sm-11 col-xs-11">
                 <textarea  class="comment_input" placeholder="Join the discussion..." @keydown.enter.prevent="postComment({{$current_user->id}}, {{$article->id}})" v-model.trim="reply_comment"></textarea>
               </div>
             </div>
          </div>
</div>

@如果（isset（$current\u user->avatar）&&&$current\u user->avatar！=''）
化身）}}“alt=”“/>
@否则
@恩迪夫

现在我想要的是只为回复链接附近的元素添加活动类。在jquery中，我可以使用

这个
和查找同级元素，但在vue.js中如何才能做到这一点？
直接从文档：


isActive是您必须满足的条件
如果您可以在注释中添加其他属性，则可以执行以下操作：

模板：

  <div class="comment_list" v-for="comment in all_comments">
    <a href="#" class="initial" v-on:click.prevent="replyBox(comment)">REPLY</a>

    <div id="reply-box-@{{comment.id}}" class="reply-box" v-bind:class="{active: comment.isActive}">
      <div class="user_comment row">
       <div class="col-md-1 col-sm-1 col-xs-1">
         <div class="user_profile_image {{ isset($current_user->personal_user) ? 'bg_blue' : 'bg_green'}}">
           @if(isset($current_user->avatar) && $current_user->avatar != '')
           <img src="{{ avatar_path($current_user->avatar)}}" alt="" />
         @else
           <img src="{{ home_asset('img/user_icon.png') }}" alt="" />
         @endif
         </div>
       </div>
       <div class="col-md-11 col-sm-11 col-xs-11">
         <textarea  class="comment_input" placeholder="Join the discussion..." @keydown.enter.prevent="postComment({{$current_user->id}}, {{$article->id}})" v-model.trim="reply_comment"></textarea>
       </div>
      </div>
    </div>
  </div>

或者，您可以在单独的组件中提取：

在.vue文件中：

<template>
  <li>
    <a href="#" class="initial" v-on:click.prevent="replyBox(comment)">REPLY</a>

    <div id="reply-box-@{{comment.id}}" class="reply-box" v-bind:class="{active: comment.isActive}">
      <div class="user_comment row">
       <div class="col-md-1 col-sm-1 col-xs-1">
         <div class="user_profile_image {{ isset($current_user->personal_user) ? 'bg_blue' : 'bg_green'}}">
           @if(isset($current_user->avatar) && $current_user->avatar != '')
           <img src="{{ avatar_path($current_user->avatar)}}" alt="" />
         @else
           <img src="{{ home_asset('img/user_icon.png') }}" alt="" />
         @endif
         </div>
       </div>
       <div class="col-md-11 col-sm-11 col-xs-11">
         <textarea  class="comment_input" placeholder="Join the discussion..." @keydown.enter.prevent="postComment({{$current_user->id}}, {{$article->id}})" v-model.trim="reply_comment"></textarea>
       </div>
      </div>
    </div>
  </li>
</template>

<script>
  export default {
    name: 'comment',
    props: ['comment']
    methods: {
      replyBox: function(comment) {
        comment.isActive = !comment.isActive;
      }
    },
  };
</script>



@如果（isset（$current\u user->avatar）&&&$current\u user->avatar！=''）
化身）}}“alt=”“/>
@否则
@恩迪夫

导出默认值{
名称：'注释'，
道具：[“评论”]
方法：{
replyBox:函数（注释）{
comment.isActive=！comment.isActive；
}
},
};

然后你可以这样使用它：

<ul class="comment_list" v-for="comment in all_comments">
  <comment :comment="comment"></comment>
</ul>




<ul class="comment_list" v-for="comment in all_comments">
  <comment :comment="comment"></comment>
</ul>