How to fix my simple custom v-on directive that does not execute a method immediately?How to handle events using Electron + Vue (SPA)Event handling dynamic created buttons in Vue.js v-for loopListen to events from parent component in child and execute child’s method in vue without hubHow do you toggle a button with Vue.js?Vue directive not triggering methodVuejs bind class to row then later hide/show the row?vuejs2 onclick will not call defined method functionhow to keep css style by using vueHow to update html styles with component methods in Nuxt appPriority of Vue directives?
How were x-ray diffraction patterns deciphered before computers?
Does the problem of P vs NP come under the category of Operational Research?
How do I safety check that there is no light in Darkroom / Darkbag?
Current in only inductive AC circuit
Has J.J.Jameson ever found out that Peter Parker is Spider-Man?
Accurately recalling the key - can everyone do it?
What does "autolyco-sentimental" mean?
Can there be multiple energy eigenstates corresponding to the same eigenvalue of a Hamiltonian (Pauli-X)?
Why adjustbox needs a tweak of raise=-0.3ex with enumitem?
Does WSL2 runs Linux in a virtual machine or alongside windows Kernel?
C# TCP server/client class
How can I perform a deterministic physics simulation?
In-Cabinet (sink base) electrical box - Metal or Plastic?
What is Modern Vipassana?
Why have both: BJT and FET transistors on IC output?
Deflecting lasers with lightsabers
Why does the friction act on the inward direction when a car makes a turn on a level road?
Pronouns when writing from the point of view of a robot
Why are sugars in whole fruits not digested the same way sugars in juice are?
How to design an effective polearm-bow hybrid?
Who's behind community AMIs on Amazon EC2?
Partial Fractions: Why does this shortcut method work?
How to understand "...to hide the evidence of mishandled magic, or else hidden by castle-proud house-elves" in this sentence
Why does BezierFunction not follow BezierCurve at npts>4?
How to fix my simple custom v-on directive that does not execute a method immediately?
How to handle events using Electron + Vue (SPA)Event handling dynamic created buttons in Vue.js v-for loopListen to events from parent component in child and execute child’s method in vue without hubHow do you toggle a button with Vue.js?Vue directive not triggering methodVuejs bind class to row then later hide/show the row?vuejs2 onclick will not call defined method functionhow to keep css style by using vueHow to update html styles with component methods in Nuxt appPriority of Vue directives?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I am here to ask some help about why is my custom directive not working properly. I am trying to create my own v-on (named v-myOn) directive that would just change the background color of the text when it is clicked. The problem is that the method is executed instantly when vue js application is started (meaning the element background has the color style already) and not when a certain event happened which is when the element is clicked. Thanks in advance!
Update: Problem as what Phil stated is I execute the function directly in the template. But in this case I am trying to pass an argument to the method changeColor. So how could i prevent it from executing while being able to pass arguments?
Here is my code in App.vue:
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1 v-myOn:click="changeColor('blue')" :style="background: color" ref="heading">Directives Exercise</h1>
<!-- Exercise -->
<!-- Build a Custom Directive which works like v-on (Listen for Events) -->
</div>
</div>
</div>
</template>
<script>
export default
data()
return
color: ''
,
directives:
myOn :
bind(el, binding, vnode)
el.addEventListener(binding.arg, binding.value)
,
methods:
changeColor(color)
this.color = color;
</script>
<style>
</style>
vue.js vuejs2
asked Mar 27 at 1:34
Jm San DiegoJm San Diego
376 bronze badges
|
show 1 more comment
I am here to ask some help about why is my custom directive not working properly. I am trying to create my own v-on (named v-myOn) directive that would just change the background color of the text when it is clicked. The problem is that the method is executed instantly when vue js application is started (meaning the element background has the color style already) and not when a certain event happened which is when the element is clicked. Thanks in advance!
Update: Problem as what Phil stated is I execute the function directly in the template. But in this case I am trying to pass an argument to the method changeColor. So how could i prevent it from executing while being able to pass arguments?
Here is my code in App.vue:
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1 v-myOn:click="changeColor('blue')" :style="background: color" ref="heading">Directives Exercise</h1>
<!-- Exercise -->
<!-- Build a Custom Directive which works like v-on (Listen for Events) -->
</div>
</div>
</div>
</template>
<script>
export default
data()
return
color: ''
,
directives:
myOn :
bind(el, binding, vnode)
el.addEventListener(binding.arg, binding.value)
,
methods:
changeColor(color)
this.color = color;
</script>
<style>
</style>
vue.js vuejs2
asked Mar 27 at 1:34
Jm San DiegoJm San Diego
376 bronze badges
1
You are executing yourchangeColorfunction in your template
– Phil
Mar 27 at 1:45
@Phil I see but may i know how can i pass a parameter into the function without executing it within the template?
– Jm San Diego
Mar 27 at 1:48
1
Given how much of this directive depends on things outside the directive (input data, the event handling function, etc), what is the use-case? Is the above a real-world example or were you trying to simplify it for this question?
– Phil
Mar 27 at 3:29
1
Wrap it in an arrow function:v-myOn:click="() => changeColor('blue')"
– Ana Liza Pandac
Mar 27 at 3:31
@Phil im just trying to create my own to test my concept regarding custom directives
– Jm San Diego
Mar 27 at 3:31
|
show 1 more comment
I am here to ask some help about why is my custom directive not working properly. I am trying to create my own v-on (named v-myOn) directive that would just change the background color of the text when it is clicked. The problem is that the method is executed instantly when vue js application is started (meaning the element background has the color style already) and not when a certain event happened which is when the element is clicked. Thanks in advance!
Update: Problem as what Phil stated is I execute the function directly in the template. But in this case I am trying to pass an argument to the method changeColor. So how could i prevent it from executing while being able to pass arguments?
Here is my code in App.vue:
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1 v-myOn:click="changeColor('blue')" :style="background: color" ref="heading">Directives Exercise</h1>
<!-- Exercise -->
<!-- Build a Custom Directive which works like v-on (Listen for Events) -->
</div>
</div>
</div>
</template>
<script>
export default
data()
return
color: ''
,
directives:
myOn :
bind(el, binding, vnode)
el.addEventListener(binding.arg, binding.value)
,
methods:
changeColor(color)
this.color = color;
</script>
<style>
</style>
vue.js vuejs2
asked Mar 27 at 1:34
Jm San DiegoJm San Diego
376 bronze badges
I am here to ask some help about why is my custom directive not working properly. I am trying to create my own v-on (named v-myOn) directive that would just change the background color of the text when it is clicked. The problem is that the method is executed instantly when vue js application is started (meaning the element background has the color style already) and not when a certain event happened which is when the element is clicked. Thanks in advance!
Update: Problem as what Phil stated is I execute the function directly in the template. But in this case I am trying to pass an argument to the method changeColor. So how could i prevent it from executing while being able to pass arguments?
Here is my code in App.vue:
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1 v-myOn:click="changeColor('blue')" :style="background: color" ref="heading">Directives Exercise</h1>
<!-- Exercise -->
<!-- Build a Custom Directive which works like v-on (Listen for Events) -->
</div>
</div>
</div>
</template>
<script>
export default
data()
return
color: ''
,
directives:
myOn :
bind(el, binding, vnode)
el.addEventListener(binding.arg, binding.value)
,
methods:
changeColor(color)
this.color = color;
</script>
<style>
</style>
vue.js vuejs2
vue.js vuejs2
asked Mar 27 at 1:34
Jm San DiegoJm San Diego
376 bronze badges
asked Mar 27 at 1:34
Jm San DiegoJm San Diego
376 bronze badges
edited Mar 27 at 2:38
Jm San Diego
asked Mar 27 at 1:34
Jm San DiegoJm San Diego
376 bronze badges
asked Mar 27 at 1:34
Jm San DiegoJm San Diego
376 bronze badges
asked Mar 27 at 1:34
Jm San DiegoJm San Diego
376 bronze badges
376 bronze badges
1
You are executing yourchangeColorfunction in your template
– Phil
Mar 27 at 1:45
@Phil I see but may i know how can i pass a parameter into the function without executing it within the template?
– Jm San Diego
Mar 27 at 1:48
1
Given how much of this directive depends on things outside the directive (input data, the event handling function, etc), what is the use-case? Is the above a real-world example or were you trying to simplify it for this question?
– Phil
Mar 27 at 3:29
1
Wrap it in an arrow function:v-myOn:click="() => changeColor('blue')"
– Ana Liza Pandac
Mar 27 at 3:31
@Phil im just trying to create my own to test my concept regarding custom directives
– Jm San Diego
Mar 27 at 3:31
|
show 1 more comment
1
You are executing yourchangeColorfunction in your template
– Phil
Mar 27 at 1:45
@Phil I see but may i know how can i pass a parameter into the function without executing it within the template?
– Jm San Diego
Mar 27 at 1:48
1
Given how much of this directive depends on things outside the directive (input data, the event handling function, etc), what is the use-case? Is the above a real-world example or were you trying to simplify it for this question?
– Phil
Mar 27 at 3:29
1
Wrap it in an arrow function:v-myOn:click="() => changeColor('blue')"
– Ana Liza Pandac
Mar 27 at 3:31
@Phil im just trying to create my own to test my concept regarding custom directives
– Jm San Diego
Mar 27 at 3:31
1
1
You are executing your
changeColor function in your template– Phil
Mar 27 at 1:45
You are executing your
changeColor function in your template– Phil
Mar 27 at 1:45
@Phil I see but may i know how can i pass a parameter into the function without executing it within the template?
– Jm San Diego
Mar 27 at 1:48
@Phil I see but may i know how can i pass a parameter into the function without executing it within the template?
– Jm San Diego
Mar 27 at 1:48
1
1
Given how much of this directive depends on things outside the directive (input data, the event handling function, etc), what is the use-case? Is the above a real-world example or were you trying to simplify it for this question?
– Phil
Mar 27 at 3:29
Given how much of this directive depends on things outside the directive (input data, the event handling function, etc), what is the use-case? Is the above a real-world example or were you trying to simplify it for this question?
– Phil
Mar 27 at 3:29
1
1
Wrap it in an arrow function:
v-myOn:click="() => changeColor('blue')"– Ana Liza Pandac
Mar 27 at 3:31
Wrap it in an arrow function:
v-myOn:click="() => changeColor('blue')"– Ana Liza Pandac
Mar 27 at 3:31
@Phil im just trying to create my own to test my concept regarding custom directives
– Jm San Diego
Mar 27 at 3:31
@Phil im just trying to create my own to test my concept regarding custom directives
– Jm San Diego
Mar 27 at 3:31
|
show 1 more comment
1 Answer
1
active
oldest
votes
You have to wrap in an arrow function otherwise it will get executed immediately as you have discovered and @Phil has pointed out.
<h1 v-myOn:click="() => changeColor('blue')" :style="background: color" ref="heading">Directives Exercise</h1>
answered Mar 27 at 3:35
Ana Liza PandacAna Liza Pandac
3,2352 gold badges14 silver badges26 bronze badges
Thanks a lot I appreciate it! and thanks to @Phil for pointing out the problem as well.
– Jm San Diego
Mar 27 at 3:36
Plus just wondering if you have any online reference that I can refer to on why the arrow function fixed it?
– Jm San Diego
Mar 27 at 3:37
1
I'll get back to you in a few.
– Ana Liza Pandac
Mar 27 at 3:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368520%2fhow-to-fix-my-simple-custom-v-on-directive-that-does-not-execute-a-method-immedi%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You have to wrap in an arrow function otherwise it will get executed immediately as you have discovered and @Phil has pointed out.
<h1 v-myOn:click="() => changeColor('blue')" :style="background: color" ref="heading">Directives Exercise</h1>
answered Mar 27 at 3:35
Ana Liza PandacAna Liza Pandac
3,2352 gold badges14 silver badges26 bronze badges
Thanks a lot I appreciate it! and thanks to @Phil for pointing out the problem as well.
– Jm San Diego
Mar 27 at 3:36
Plus just wondering if you have any online reference that I can refer to on why the arrow function fixed it?
– Jm San Diego
Mar 27 at 3:37
1
I'll get back to you in a few.
– Ana Liza Pandac
Mar 27 at 3:39
add a comment |
You have to wrap in an arrow function otherwise it will get executed immediately as you have discovered and @Phil has pointed out.
<h1 v-myOn:click="() => changeColor('blue')" :style="background: color" ref="heading">Directives Exercise</h1>
answered Mar 27 at 3:35
Ana Liza PandacAna Liza Pandac
3,2352 gold badges14 silver badges26 bronze badges
Thanks a lot I appreciate it! and thanks to @Phil for pointing out the problem as well.
– Jm San Diego
Mar 27 at 3:36
Plus just wondering if you have any online reference that I can refer to on why the arrow function fixed it?
– Jm San Diego
Mar 27 at 3:37
1
I'll get back to you in a few.
– Ana Liza Pandac
Mar 27 at 3:39
add a comment |
You have to wrap in an arrow function otherwise it will get executed immediately as you have discovered and @Phil has pointed out.
<h1 v-myOn:click="() => changeColor('blue')" :style="background: color" ref="heading">Directives Exercise</h1>
answered Mar 27 at 3:35
Ana Liza PandacAna Liza Pandac
3,2352 gold badges14 silver badges26 bronze badges
You have to wrap in an arrow function otherwise it will get executed immediately as you have discovered and @Phil has pointed out.
<h1 v-myOn:click="() => changeColor('blue')" :style="background: color" ref="heading">Directives Exercise</h1>
answered Mar 27 at 3:35
Ana Liza PandacAna Liza Pandac
3,2352 gold badges14 silver badges26 bronze badges
answered Mar 27 at 3:35
Ana Liza PandacAna Liza Pandac
3,2352 gold badges14 silver badges26 bronze badges
answered Mar 27 at 3:35
Ana Liza PandacAna Liza Pandac
3,2352 gold badges14 silver badges26 bronze badges
answered Mar 27 at 3:35
Ana Liza PandacAna Liza Pandac
3,2352 gold badges14 silver badges26 bronze badges
3,2352 gold badges14 silver badges26 bronze badges
Thanks a lot I appreciate it! and thanks to @Phil for pointing out the problem as well.
– Jm San Diego
Mar 27 at 3:36
Plus just wondering if you have any online reference that I can refer to on why the arrow function fixed it?
– Jm San Diego
Mar 27 at 3:37
1
I'll get back to you in a few.
– Ana Liza Pandac
Mar 27 at 3:39
add a comment |
Thanks a lot I appreciate it! and thanks to @Phil for pointing out the problem as well.
– Jm San Diego
Mar 27 at 3:36
Plus just wondering if you have any online reference that I can refer to on why the arrow function fixed it?
– Jm San Diego
Mar 27 at 3:37
1
I'll get back to you in a few.
– Ana Liza Pandac
Mar 27 at 3:39
Thanks a lot I appreciate it! and thanks to @Phil for pointing out the problem as well.
– Jm San Diego
Mar 27 at 3:36
Thanks a lot I appreciate it! and thanks to @Phil for pointing out the problem as well.
– Jm San Diego
Mar 27 at 3:36
Plus just wondering if you have any online reference that I can refer to on why the arrow function fixed it?
– Jm San Diego
Mar 27 at 3:37
Plus just wondering if you have any online reference that I can refer to on why the arrow function fixed it?
– Jm San Diego
Mar 27 at 3:37
1
1
I'll get back to you in a few.
– Ana Liza Pandac
Mar 27 at 3:39
I'll get back to you in a few.
– Ana Liza Pandac
Mar 27 at 3:39
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368520%2fhow-to-fix-my-simple-custom-v-on-directive-that-does-not-execute-a-method-immedi%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You are executing your
changeColorfunction in your template– Phil
Mar 27 at 1:45
@Phil I see but may i know how can i pass a parameter into the function without executing it within the template?
– Jm San Diego
Mar 27 at 1:48
1
Given how much of this directive depends on things outside the directive (input data, the event handling function, etc), what is the use-case? Is the above a real-world example or were you trying to simplify it for this question?
– Phil
Mar 27 at 3:29
1
Wrap it in an arrow function:
v-myOn:click="() => changeColor('blue')"– Ana Liza Pandac
Mar 27 at 3:31
@Phil im just trying to create my own to test my concept regarding custom directives
– Jm San Diego
Mar 27 at 3:31