如何将活动类添加到特定元素?(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>更多推荐
class,<div,div>,电脑培训,计算机培训,IT培训"/> <meta name="descrip
发布评论