Add #click event to text in vuejs - javascript

I am trying to add a click event to a text add states in description method stated below. Please help me resolve this issue.
<div>
class="alert-container"
v-for="alert in alerts"
>
<div class="alert-item">
<div class="alert-info">
{{alert.sender}}
</div>
<div v-if="alert.alert_type === 'urgent'">
<div class="alert-description">{{ addMethod(alert.description) }}</div>
</div>
<div v-else class="alert-description" v-html="alert.description"></div>
</div>
</div>
<script>
export default {
methods: {
addMethod(text) {
return text + '-' + add click event to here to the description text just so when the user clicks on the event below evacuation method runs.
},
evacuation() {
console.log("Leave the building now.")
}
}
}
</script>

Just render the description text then add the click avent to the wrapper element :
<div class="alert-description" #click="evacuation">{{ alert.description }} - </div>
adding the event inside a string and rendering it using v-html will not be interpreted.

<div class="alert-description">{{ alert.description }} - <div class="evacuation">Click here</div></div>
this is how I solved my problem

Related

Unable to use prevent default option on button click using Vue.js

Here what I am trying is I have dynamic data and displaying it in section and section is clickable and under that, I have 2 buttons called edit, del after clicking those buttons also it should trigger some action.
The problem I am facing is even though I am clicking edit action but the section button click also getting triggered and I tried putting #click.prevent still facing the issue.
what I need is whenever I click on edit or del the section action should not trigger below is my code sandbox URL
https://codesandbox.io/s/vuejs-with-import-json-example-forked-tjn45?fontsize=14&hidenavigation=1&theme=dark
code
<template>
<div>
<section
style="border-style: dotted"
v-for="(name, index) in names"
:key="index"
#click.prevent="methodOne"
>
<div>
<button #click.prevent="edit">Edit</button>
<button #click="del">Del</button>
</div>
<div>
{{ name }}
</div>
</section>
</div>
</template>
<script>
import states from "../assets/data.json";
export default {
name: "HelloWorld",
computed: {
names() {
return states.accounts.map((item) => {
return item.name;
});
},
},
methods: {
methodOne() {
alert("Method One");
},
edit() {
alert("Edit");
},
del() {
alert("DELETE");
},
},
};
</script>
This is event propagation issue, .prevent don't stop the propagation, Use .stop instead of .prevent. Update example here
<div>
<button #click.stop="edit">Edit</button>
<button #click.stop="del">Del</button>
</div>

Vue onclick event returns wrong srcElement

Why is it that onclick event returns wrong srcElement even if I have put the onclick on the parent element it still return child element as the source of the click event. How can I make it to always select the element where I put the onclick method? Below is my code:
<div class="col-md-4 player-column" v-for="(player, index) in group" v-on:click="selectPlayers" :data-image="player.image">
<div class="players">
<div class="player-image">
<div class="circle">
<img class="img-responsive" v-if="player.image" :src="player.image | alternateIfImageExists(player.teamName, player.firstName+' '+player.familyName, 'small')">
<i class="fa fa-user" aria-hidden="true" v-else></i>
</div>
</div>
<div class="player-info">
<p class="player-fullname">{{player.firstName}} {{player.familyName}}</p>
<p>{{player.playingPosition}}</p>
<p v-if="player.teamCode !== ''">{{player.teamCode}}</p>
<p v-if="player.teamCode == ''">{{player.teamName}}</p>
<img :src="player.team_logo" :alt="player.teamCode">
</div>
</div>
</div>
Vue method
selectPlayers(e) {
console.log(e);
}
Console logs:
currentTarget:null
srcElement:div.player-info
target:div.player-info
currentTarget:null
srcElement:img.img-responsive
target:img.img-responsive
You have to use currentTarget.
<template>
<div>
<a #mouseover="mouseover"><img src="" /></a>
</div>
</template>
<script type="text/javascript">
export default {
name: 'component',
methods: {
mouseover(e) {
//e.currentTarget will always return a
}
}
}
</script>
target, srcElement is the element that triggered the event (e.g., the user
clicked on)
currentTarget is the element that the event listener is attached to.
By adding this as parameter when calling method I'm able to get the source of the element was
v-on:click="selectPlayers(this)"
Method:
selectPlayers(e) {
console.log(e);
}

Show/hide multiple children classes for an individual parent click (Jquery)

I'm fairly new to Javascript/Jquery and I'm trying to hide multiple children/adjacent classes when a specific parent class is clicked.
Here's my HTML
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
</div>
</div>
What I'm aiming to do is: When a user clicks one of the two smaller icons shown (pov_icon_small), for that individual icon: the classes pov_icon_small and pov_title_small will change to pov_icon_large and pov_title_large respectively. In the same time, I want the other 'large' icon and 'title' to revert back to the 'small' state
I've started calling some Javascript but I don't think I'm headed the right way:
$('.pov_icon_small').on('click', function (e) {
$(this).toggleClass("pov_icon_large");
});
Would anyone be willing to point me to the right direction?
To use individual click
$('.pov_icon_small , .pov_icon_large').on('click', function (e) {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
});
and for title the same way
$('.pov_title_small , .pov_title_large').on('click', function (e) {
$('.pov_title_large').not($(this)).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
To run both action on icon click use this
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
Note: be sure to include Jquery
You can add a common class icon for the icon div and title for the title div and following code will work,
$(".pov_icon_small").on('click',function(){
$(this).parent().siblings().children('div').each(function(value){
if($(this).hasClass('icon'))
$(this).addClass('pov_icon_small').removeClass('pov_icon_large');
else if($(this).hasClass('title'))
$(this).addClass('pov_title_small').removeClass('pov_title_large');
});
$(this).addClass('pov_icon_large').removeClass('pov_icon_small');
$(this).siblings('.title').addClass('pov_title_large').removeClass('pov_title_small');
});
Here as you can see, I am first getting parent of the icon clicked i.e. Your pav_icon div now I am changing for all the siblings now each div in the sibling. If it is Iicon changing icon classes as required if title changing title classes.

Why is not this onClick work?

I have the following reactJS/JSX code :
var LikeCon = React.createClass({
handleClick: function(like) {
return;
},
render(){
return this.renderLikeButton(this.props.like, this.props.likeCount)
},
renderLikeButton(like, likeCount){
return (
content = <div className={like==true ? "likeButConAct" : "likeButCon"}>
<div className="likeB" onClick={this.handleClick(!like)} > </div>
{ likeCount > 0 ? <div className="likeCount">{likeCount}</div>: null}
</div>
);
}
});
The problem is that handleClick will never be triggered even when I click the likeB div? Why?
Edit :
This is the code that uses the LikeCon component :
var TopicComments = React.createClass({
render: function() {
var comment = this.props.data.map(function(com, i) {
return (
<article>
<div className="comment">
<div className="tUImgLnk">
<a title={com.UserName} target="_blank" href={com.UserInfoUrl}>
<img className="tUImg" src={com.UserPicSrc} />
</a>
</div>
{com.UserName}
<div className="content">
{com.Message}
</div>
<div className="status">
<div className="dateCreated dimText">
{com.DateCreated}
</div>
<LikeCon like={com.Like} likeCount={com.LikeCount} />
<article></article>
</div>
</div>
</article>);
}.bind(this));
return(
<div className="comments">
{comment}
</div>
);
}
});
I suspect the problem is that the LikeCon is generating a markup for the TopicComment so the handleClick is not really there when triggered from the TopicComment. Is there a simple way to fix this?
You should be passing handle click event like so:
<div className="likeB" onClick={this.handleClick.bind(this,!like)} > </div>
With your current version you are passing result of executing this.handleClick(!like) to onClick handler which is undefined.
With above version you are passing a function which takes !like as its first parameter when executed.
Update:
Also since your div only contains a single space character, it is difficult to find the space character and click on it. If you add a text and click on that text, you will see the handle function is being executed:
working fiddle : http://jsfiddle.net/an8wvLqh/

Find sibling with Javascript and Hammer.js

I have made a simple system which detects double taps. I want to show a heart icon when someone double taps on an image, just like on Instagram.
This is what my code looks right now:
var elements = document.getElementsByClassName('snap_img');
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
// Some javascript to show the heart icon
});
});
This is what the HTML looks like:
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
<div class="snap_too">
</div>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
LA is the shit...
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
So when the element 'snap_img' is double tapped, I need to get the element 'like_heart' which is one line below the snap_img element. How do I get that sibling element and fade it in with JQuery?
Like this
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
$(element).next().text('♥').hide().fadeIn();
});
});
P.S. I've added that heart text, since the sibling was empty.
On the event handler, i would do $(element).parent().find('.like_heart').fadeIn(); So the code is not dependant on the element ordering.
(To clarify to selector: take the parent element which is the div.snap_item and find an element with class like-heart inside it)

Categories