如何将活动类添加到特定元素？(How to add active class to specific element?)

如何将活动类添加到特定元素？(How to add active class to specific element?)

我有这个方法：

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>

现在我想要的是仅为回复链接附近的元素添加活动类。 在jquery我可以使用this和找到兄弟姐妹，但我怎么能在vue.js做到这一点？

I have this methods :

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

In view i have this:

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

Now what i want is to add class active only for element that is near reply link. In jquery i could use this and that find siblings but how can i do that in vue.js?

最满意答案

如果您可以在评论中添加其他属性，则可以执行以下操作：

模板：

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

方法：

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

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

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

然后你可以像这样使用它：

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

If you could add an additional property to the comment you could do the following:

Template:

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

Method:

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

Alternatively, you can extract this in a separate component:

In a .vue file:

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

Then you can use it like this:

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