We Keep Coding

how to stop iterating my like button inside my post

I am working on a post system with likes where the user can toggle the post`s like I have done everything correctly except the last step, the problem inside my v-for loop I fetch likes table from post-like relation(many to many since likes table has user_id and post_id) but it is iterating my button even when I add a condition look here-> duplicated like button, I have tried many things v-if, v-show I think the problem is with my algorithm I hope someone can fix that for me thanks.
<div class="panel panel-white post panel-shadow" v-for="post in posts" >
<div class="post-heading">
<div class="pull-left image">
<img v-bind:src="'img/profile/' + post.user.photo" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>{{post.user.name}} </b>
made a post.
</div>
<h6 class="text-muted time">{{post.created_at | hour}}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" v-for="(like) in post.likes" v-bind:style="like.user_id===id && like.post_id===post.id?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
<a class="btn btn-default stat-item" #click.prevent>
<i class="fa fa-reply-all"> {{post.comments.length}}</i> Comments
</a>
</div>
</div>
<comment-input :post="post" :userId="id" :userPhoto="userPhoto"></comment-input>
<ul class="comments-list" v-for="comment in post.comments?post.comments:''">
<comments :comment="comment" :userId="id" :userPhoto="userPhoto"></comments>
</ul>
</div>
<hr>
</div>
</div>

Don't loop through the button element, try to use a method likedBythisUser to check if the current user liked the post in order to bind it to the button style :
methods:{
likedBythisUser(post,id){
return post.likes.find(like=>{
return like.user_id===id && like.post_id===post.id;
}) // return a boolean value
}
}
template :
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" bind:style="likedBythisUser(post,id)?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>

How to retrieve post id to pass through Ajax?

Let's say I have a website like Facebook, Twitter, or any social network. I have posts in a feed. I retrieve a list of data about each post from the backend. This data contains the id, post description, number of likes, etc. The unique id is a way to identify each post.
I have a REST framework set up where if the user likes the post; it updates the likes count of that post and registers the user as he/he liked that post. For this to happen, I need to make an AJAX request on localhost/like/{post_id}
How can I get the id of the post? Should I put this id in a data-attribute in the like button and that way I can retrieve the id like this? If this is the case, should I put the id in all the actionable features (like button, dislike button, share button, etc.)?
Here's what my post's button container looks like:
<div class="grid post__btn-container">
<div class="item">
<i class="like"></i>
</div>
<div class="item">
<i class="dislike"></i>
</div>
<div class="item">
<i class="share"></i>
</div>
<div class="item">
<i class="comment"></i>
</div>
</div>
What is the best way to place the post id and get it and pass it as a POST request in Ajax?

Have a look at this:
https://jsfiddle.net/x5m7j0Lk/
Given a setup like this
<div class="grid post__btn-container" data-postid="123">
<div class="item">
<i class="like">Like</i>
</div>
<div class="item">
<i class="dislike">Dislike</i>
</div>
<div class="item">
<i class="share">Share</i>
</div>
<div class="item">
<i class="comment">Comment</i>
</div>
</div>
<div class="grid post__btn-container" data-postid="456">
<div class="item">
<i class="like">Like</i>
</div>
<div class="item">
<i class="dislike">Dislike</i>
</div>
<div class="item">
<i class="share">Share</i>
</div>
<div class="item">
<i class="comment">Comment</i>
</div>
</div>
You can retrieve the id like this:
var posts = $('div[class="grid post__btn-container"]').children()
posts.on("click", function(){
var postId = $(this).parent().data('postid')
alert(postId)
})

while making whole div clickable a tag is self close since where it start

I want to make my whole div clickable but when i put my div tag code in anchor tag then its not clickable at all, even when i check console there a tag is closing just after it starting please help. thanks in advance.
<a href="#">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-12">
<div class="post-media">
<img src="upload/testi_01.png" alt="" class="img-responsive img-thumbnail">
</div>
<!-- end media -->
</div>
<!-- end col -->
<div class="col-md-6 col-sm-6 col-xs-12">
<p> <strong>Name (fi / intermediary ? - entrepreneur to assist for bank finanae)</strong> </p>
<p> <i class="fa fa-building"></i> Industry </p>
<p> <i class="fa fa-tag"></i> Type Of Finance </p>
<p> <i class="fa fa-inr"></i> Amount </p>
<p> <i class="fa fa-map-marker"></i> location </p>
</div>
<!-- end col -->
<div class="col-md-2 col-sm-2 col-xs-12">
<div class="job-meta">
<i class="fa fa-calendar"></i>
<p>13th Feb, 2018</p>
</div>
<!-- end meta -->
</div>
<!-- end col -->
<div class="col-md-2 col-sm-2 col-xs-12">
<div class="job-meta text-center">
Connect Now <i class="fa fa-check"></i>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</a>

Your syntax is invalid - you have nested a tags - you cannot have a within an a.
It would be better to add a click handler to the div, and then get that to trigger the 'a' within.

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
In w3 specification it is mentioned: 12.2.2 Nested links are illegal

Jquery Target a tag in the third child of previous sibling

I'm not so great with traversing in jquery. Here is my markup:
<div class="row planarea">
<div class="col-md-6">
<h1>Agera Fixed Advantage 12</h1>
Fixed Price - 12 Months<br>
Utility: Con Edison
</div>
<div class="col-md-3">
<span class="price">$0.0799</span> <span class="killowats">/ kWh</span>
</div>
<div class="col-md-3">
<a class="nolink showmore" data-toggle="collapse" data-target="#24moscollapse" aria-expanded="false" aria-controls="24moscollapse">
<div class="selectdetails">
Details <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</div>
</a>
<label >
<input type='radio' name="prefs" class="hidecheck" value="mail">
<span></span>
</label>
</div>
</div><!--row-->
<div class="row collapse detailsrow" id="24moscollapse">
<div class="col-xs-12 plandetailsbox">
stuff
</div>
</div>
what I want to do is something similar to this:
$('.detailsrow').on('show.bs.collapse', function () {
$(this).prev().closest().("a.showmore").html('<div class="selectdetails">Details <i class="fa fa-chevron-circle-up" aria- hidden="true"></i></div>');
})
I can't seem to figure out how to target that a tag and it's getting kind of confusing. I need to target what I believe is the a tag in the third child of the previous sibling for every repeated row of this information. Any help would be appreciated.

closest() finds the first parent. And closest(selector) finds the first selector matched parent.
Whereas, you are looking for a child. So, you can use find(selector).
Change this:
$(this).prev().closest().("a.showmore")
To this:
$(this).prev().find("a.showmore")

HTML mustache templates - how to get first item of collection

I'm using mustache templates to correctly generate bootstrap accordions. Now I need to pass a prefix to the top item id = 'accorElM' and thought I could do something like this.
 
<div class="accordion" id='{{#DataResult[0].prefixID}}_accorElM'>
IE, get the first item in the collection
Is this possible to do?
Code sample:
<div class="accordion" id='accorElM'>
{{#DataResult}}
<div class="accordion-group">
<div class="accordion-heading">
<a style="text-align: left; text-decoration: none" class="accordion-toggle btn" data-toggle="collapse" data-parent='#{{prefixID}}accorEl' href='#{{prefixID}}collapseEl_{{id}}'>
<i class="icon-globe"></i> {{tipo}}<i class="icon-chevron-down pull-right"></i>
</a>
</div>
<div id='collapseEl_{{id}}' class="accordion-body collapse">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span9">
<address>
<br />
{{zona}}
<br />
{{cpostal}}
<br />
{{pais}}
</address>
</div>
<div class="span3">
<div class="pull-right">
.....
</div>
</div>
</div>
</div>
</div>
</div>
{{/DataResult}}
</div>

I'm guessing your data must be something like this:
{"DataResult":[
{"prefixID":"1","name":"first"},
{"prefixID":"2","name":"second"}
]
}
but in the mustache template file, I don't think you can index the object items. The approach that I would have taken would involve manipulating the Json object in javascript(or even in the backend when constructing the object) before rendering it.
In your case, if you need the prefixID of the first item in the DataResult. you could alter the object to make it look like this:
{"DataResult":[
{"prefixID":"1","name":"first"},
{"prefixID":"2","name":"second"}
],
"theIdIWant":"1"
}
and then in the template file:
<div class="accordion" id='{{theIdIWant}}_accorElM'>
{{#DataResult}}
<div class="accordion-group">
///////
</div>
{{/DataResult}}
</div>
Hope this helps.