We Keep Coding

Multiple functions on click prevents function with event parameter - Vue

If I have multiple functions passed to a click event i.e.
#click="
inputHandler();
sendToken(computedUser.email);
responseMessage();
"
The function with an event parameter:
inputHandler(e) {
// code
}
Won't run. If I pass it on it's own:
#click="inputHandler"
It works fine.
Why is this and how can I get around it?

Internally Vue uses some RegExps to decide what form of event handler you're using.
If it seems to be the name of a method it will call it and pass the event.
If it seems to be inline code it'll just run it. In this case the event object is accessible as $event.
So:
#click="inputHandler($event)"
is roughly equivalent to:
#click="inputHandler"
Strictly speaking these aren't quite the equivalent, for example with component events that emit multiple arguments you'll only get the first one using $event like this.
See https://v2.vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers
For a deeper understanding see the Vue source code:
https://github.com/vuejs/vue/blob/0baa129d4cad44cf1847b0eaf07e95d4c71ab494/src/compiler/codegen/events.js#L96
Give your eyes a few minutes to adjust and it isn't too difficult to understand.
Personally I try to avoid anything more complicated than a single method call in the inline listener. Instead I'd suggest having something like #click="onSendClick" and let the method onSendClick worry about the details.

If I recall correctly, vue creates a wrapper function, if the passed value isn't a function. So
inputHandler();
sendToken(computedUser.email);
responseMessage();
actually get's turned into
function wrapper(){
inputHandler();
sendToken(computedUser.email);
responseMessage();
}
And as you can see the arguments passed to wrapper are lost.
The easiest way to fix this is probably to create a new method that accepts the event parameter and calls all of your function and use that one in the event handler.

using foreach of class inside another class

I use foreach for instances of class ( let say class1 ) inside prototype method of another class(class2), anyway it works well but when I try to use (this) to refer to some vales of class1 it doesn't work, any help?

Step 1: Look how to post questions on SO.
Step 2: If you program JS you need to know how this works, this case is not the real issue, the issue is you don't. Plenty of tutorials to google on that, I would recommend it since understanding how this works in JS is essential.
Depending on your actual code this could be enough to get you going:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
So in a place where you call your function try using this beforehand:
var _this = this;
Then call your function:
whateverobj.myfunction().bind(_this)

Why is JQuery messing with the params I want to bind to a click handler?

In short, I'm doing this:
function myHandler(a,b,c,d){
doStuffWithMyParams(a,b,c,d);
}
Then somewhere else:
jqueryElem.click(myHandler.bind(a,b,c,d));
When I do, some of the parameters passed (a,b) are read correctly. But the third (c) is a JQuery event object. I've also tried binding the args as an array. Then, the first param becomes the event object.
Totally perplexed here. Thanks in advance for any direction on this.

With the code myHandler.bind(a,b,c,d), the argument a is the context that bind() uses
So my handler is actually seeing this
function myHandler(b,c,d,event){
So I have a feeling you want
jqueryElem.click(myHandler.bind(this, a,b,c,d));

Building on what epascarello wrote, this should do the trick:
jqueryElem.click(myHandler.bind(this,[a,b,c,d]));
Not having the array might cause b to be treated as an eventHandler. Notice I used an array, but it could also be an object, for instance.

simple way rather than to call a function repeatedly in javascript

I have a function and some input element(s) will use that for a purpose.
i tried to make an array of them and pass to that function, but failed.
$("#txtFirst").change(function(){validateForm($(this));});
$("#txtLast").change(function(){validateForm($(this));});
$("#txtNick").change(function(){validateForm($(this));});
how to make it more simple, rather than use same format repeatedly?

You can target multiple elements in one selector :
$("#txtFirst, #txtLast, #txtNick").change(function(){validateForm($(this));});

Try this:
$("#txtFirst, #txtLast, #txtNick").change(function(){validateForm($(this));});

JavaScript: how to pass object value from one function to another

I am using code lines like the following in order to fetch data from an intranet website:
util.setProp(obj, "firstNameOld", $(msg).find('#fname_a').text());
Now I have another function in the same file where I want to use the above again, resp. the value of that object - currently I am hard-coding this ('Test') for test purposes:
util.setProp(obj, "firstNameNew", 'Test');
How can I pass the value from the firstNameOld object in one function to the firstNameNew object in another function ? If a solution with global variables is better here than this would work as well.
Many thanks for any help with this, Tim.

I've never used the framework that includes util But I imagine that if there is a setProp() then there has to be a getProp() or something similar.
If so, you could do something like
util.setProp(obj, "firstNameNew", util.getProp(obj, "firstNameOld"));
This also relies on the assumption that you want to copy from two properties in the same object.
If not, then pass the desired source object in the getProp() call.

My guess is that functions (or properties) are called "firstNameOld" and "firstNameNew", so the first time you get it from selector, second time you want to do the same.
Try to use the local variable like that:
var text = $(msg).find('#fname_a').text();
//
util.setProp(obj, "firstNameOld", text);
//
util.setProp(obj, "firstNameNew", text);