Wie füge ich aktive Klasse zu einem bestimmten Element hinzu?

Question

Ich habe diese Methoden:

methods: { 

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

Im Hinblick i diese:

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

Nun, was ich will, ist aktiv Klasse hinzufügen nur für Element, das in der Nähe von Antwort-Link ist. In jquery konnte ich this verwenden und Geschwister finden, aber wie kann ich das in vue.js tun?

Answer 1

werden muss treffen, wenn Sie eine zusätzliche Eigenschaft zum Kommentar hinzufügen könnten Sie Folgendes tun könnte:

Vorlage:

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

Methode: Alternativ

methods: { 
    replyBox: function(comment) { 
     comment.isActive = !comment.isActive; 
    } 
    }, 

, können Sie diese in einem separaten Bauteil extrahieren:

In einer .vue Datei:

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

Dann können Sie es wie folgt verwenden:

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

Answer 2

Gerade von docs: https://vuejs.org/v2/guide/class-and-style.html

<div v-bind:class="{ active: isActive }"></div>

isActive ist Ihre Bedingung, die