VueJS <input> value change not calling #change - javascript

With VueJS, I have two seperate components.
A modal and a form.
In the modal form, the user inputs a PIN that gets confirmed then this value is set to an input tag in the form to basically save this value.
In the modal component, I set the value simply like this:
document.getElementById('pin').value = this.pin_input;
Within the form component, the input tag is like this:
<input type="hidden" #change="submit()" id="pin">
In the console, the value of this input tag get's set correctly, though the #change="submit()" is not getting called when the values changes.
submit method code within form component that is not getting called:
methods : {
submit : function(){
console.log("SUBMIT HERE");
}
}
Why is my input tag's #change not getting called?

Setting the value on a DOM element does not fire the input / change events. This is why the event listener you set in vue is not called.
You can fire those events manually, they will then be picked up by vue.
var element = document.getElementById('pin');
element.value = this.pin_input;
// Works in most modern browsers.
var event = new Event('change');
element.dispatchEvent(event);

From my point of view, For communication between components it's better to use:
some state management like Vues https://vuex.vuejs.org/, and save input value in separate store
or
try with custom methods https://v2.vuejs.org/v2/guide/components-custom-events.html
use parent component and pass callback into child components.
#change will not work in your case

Related

Checkboxes read-only attribute HTML

I am developing a website, and I need a certain checkbox that when is unchecked the correspondent input box has the read-only attribute and when I check it the read-only attribute gets removed from the input box. Right now, what happens is I load the website, the checkbox is unchecked and the input box does not has the read-only attribute as it was supposed to. Altough when I check and uncheck it the input box gets the read-only attribute.
Why is this happening?
Here is the Javascript code:
const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");
checkbox.addEventListener("change", function() {
if (!(checkbox.checked)) {
inputElement.setAttribute("readonly", "true");
} else {
inputElement.removeAttribute("readonly");
}
});
Your function sets the readonly attribute when the checkbox is changed.
It doesn't get set when the document initially loads, because the user hasn't changed it.
If you want the function to run when the document initially loads, then you'll need to call it at that time. Alternatively, you could set the attribute in the HTML instead of modifying it with JS (which generally makes more sense when setting default values for attributes). Note that if you do either of these, then the state can never change so the change event handler will never run.)

Clearing a text field value using a final-form calculator

I am trying to use the final-form calculator to clear a field whenever another field has changed.
In my example, I have two fields. Whenever the first field changes, the second field is cleared. This is expected.
However, A problem arises when the parent component of the form is re-rendered. Each time the parent component calls to it's render function, the second field is cleared even though the first field has not changed. This can be observed by clicking the forceUpdate button at the top.
Is it possible to prevent the second field from clearing like this? Preferably without using shouldComponentUpdate
I have been able to resolve it by moving the decorators array outside of the component.
const decorators = [calculator]; // declared outside of App
And reference the value in the form props
<Form
decorators={decorators}
...

Which event is triggered when v model value is changing

I'm new to Vuejs and my requirement is to write a single functional globally to trigger whenever v-model value of my form elements are set. I tried to write this for element.onchnage but this is not working.
Can some one tell me which HTML event is triggered when the v-model value is set in vuejs ?
Hey Linu and welcome to SO.
Check out the docs for Form input bindings:
https://v2.vuejs.org/v2/guide/forms.html
There it says:
v-model internally uses different properties and emits different
events for different input elements:
text and textarea elements use value property and input event
checkboxes and radiobuttons use checked property and change event;
select fields use value as a prop and change as an event.
So instead of v-model you can do the following for inputs
<input :value="dataProperty" #input="dataProperty = $event.target.value" />

In Vue.js, how do I enable buttons in a v-for loop when an input is changed?

Here in my baseline code:
https://plnkr.co/LdbVJCuy3oojfyOa2MS7
I would like the 'Press' me button to be enabled for any given row whenever the input field changes.
I've modified the code by adding:
:disabled="isButtonDisabled(dino)
to the button
and then creating the following stub function:
isButtonDisabled: function(dino) {
}
After this, I'm getting stuck. How can I compare the current value to the initial value to determine whether or not I should enable the button?
Edit: In case I'm being unclear, the bottom line is that I want a button to be enabled whenever the corresponding input has been changed.
Another option is to use the #input or #change event on the input to enable the button.
<input type="text" v-bind:value="dino" #input="enableButton" />
Then down in your methods handle the event. You could also pass dino as a parameter to the #input event handler.
enableButton: function(e) {
// determine input from e and toggle button
}

ID of button changes, but document.ready function calls previous value's method

I'm writing a simple single page application with Express.js. At the bottom of the page is a form, and this form is used to add users to a table, or to update a specific user. The 'submit' button will have a different function depending on the ID of the button at the time it is pressed.
Inside my document.ready function, I have 2 lines of interest:
$('#btnAddUser').on('click', addUser);
$('#btnUpdateUser').on('click', updateUser);
I also have methods that change the value of this id from #btnAddUser to #btnUpdateUser, and vice versa. I can get the ID to change. The issue is that the document.ready function doesn't seem to consider these changes.
For instance, the app starts out with the id #btnAddUser. Then I change it to have the Id #updateUser, and I can see that this works. When I press the button, though, the addUser method fires instead of the updateUser method, and I'm not sure why.
Pointy's answer should work, but this is an X->Y problem. You shouldn't be trying to toggle functionality by changing an element's ID.
Instead, store a value somewhere that says what the button should do, and then use that. You could use a data-* attribute on the button if you want:
<!-- Dynamically change data-action and value as needed -->
<input id="btnUserAction" type="button" data-action="add" value="Add" />
$('#btnUserAction').on('click', function (e) {
var action = ($(this).data("action") === "add") ? addUser : updateUser;
action.call(this, e);
});
Alternatively, you could have two separate buttons and show/hide them. Either approach should work.
You can get the effect you want by using event delegation to set up the handlers:
$(document).on('click', '#btnAddUser', addUser);
$(document).on('click', '#btnUpdateUser', updateUser);
By doing it that way, you defer the inspection of the element until the time a "click" actually happens. With your code, the elements were located at the time the handlers were assigned. After that, it doesn't matter what the "id" value is because the handler is directly associated with the DOM node (via an internal map that jQuery maintains).
This won't work, because the click event is assigned one time when ready function executes. I think the better way is to have two buttons and show/hide them instead of changing the id.
Another way would be to store the action you want in an attribute:
$('#mybutton').click(function() {
var action = $(this).attr("data-action");
if(action == "do_this")
// ...
});
And for changing the action:
$('#mybutton').attr("data-action", "do_this");

Categories