Is it possible, when button triggers this action, it stays on !this.lastMeasure? Because when I click it again, it goes back to the last state. I want it to stay on the new state.
changeMeasure() {
this.lastMeasure = !this.lastMeasure
}
Vue provides event modifiers for the v-on directive. One of these event modifiers is .once, it rules the associated events to be triggered at most once.
You can use this event modifier like :
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>
Then in your case, you may use something like :
<!-- '#' is the shorthand for 'v-on:' -->
<button #click.once="changeMeasure">I am the button</button>
source
Related
Hi all: I have a modal that I would like the buttons to be passed through slots, each with its own events. The problem is that when I click on the button, the event fires but the parent can't hear it.
<template>
<modal-detail v-if="viewModal" title="Modifica brands" #close="viewModal=false">
<!-- <template #header><p>ciao bob</p></template> -->
<template #body>
sdfgsfgddd
</template>
<template #actions>
<button-cancel buttonText="cancella" #click="$emit('close')"></button-cancel>
<button-confirm buttonText="conferma" #click="$emit('confirm')"></button-confirm>
</template>
</modal-detail>
</template>
The problem is thath #close="something" is never called.
Suggestion?
Thanks, all
It seems like you're using a custom component button. You either need to bind the #click handler to prop callback or use #click.native to apply the click handler.
To help debugging events and other issues such as with Vuex in the future, you can use the Vue browser dev tools.
If you install that plugin, and check the events stream you can see what events are being emitted by what. For example, if you haven't correctly set up your click handler with your custom button then you won't see the event getting emitted.
I have a form which basically looks like this:
<form #submit.prevent="onSubmitted">
Email<input type="email" /> <br />Content<input type="text" />
<CancelSave #cancel="onCanceled" />
</form>
There are input fields for an email and content and there is a custom component which emits submit and cancel events. I want the submit event to be automatically caught by the form and not by the button group.
Note that I explicitly want to use the html <form> element to get the features of html validation which I can't have (without any validation libraries at least) if i just wrap all the inputs in a div and listen to the submit or cancel events.
All works fine except that when I press cancel it is also caught as a submit and the form gets submitted.
Here's a sample of my code:
https://codesandbox.io/embed/62lo86rprr
EDIT: FYI Apparently when pressing the cancel button, cancel AND submit are caught
The cancel button in your form does not have a type attribute. By default, buttons within forms are assumed to be of type submit. Add a type="reset" to the cancel button to avoid the submission.
See MDN docs
In the vue docs under Event Modifiers, there's an example of a modifier called capture which states the following:
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
I've done some searching, but haven't found a clear answer as to how this modifies the event binding, then I thought to myself 'You know who always has the answer? Stack Overflow'
So right after posting I stumbled on this article which illustrates it clearly. Let's say for this example that you have three elements nested within each other:
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
When a click event occurs, there are two phases: the first is called capturing, the second is called bubbling. When you click on the .inner, the event traverses down from the outermost container element .outer, to .middle, then to .inner in the capturing phase, then from .inner to .middle, then to .outer in the bubbling phase.
If capture is set on .inner for a click event handler:
<div class="outer">
<div class="middle">
<div class="inner" v-on:click.capture="doThis"></div>
</div>
</div>
and you click on it, it will hit .outer, then .middle, then .inner in the capture phase, which will cause doThis(...) to be called, after which the bubbling phase begins.
If capture is set on .middle for a click event handler
<div class="outer">
<div class="middle" v-on:click.capture="doThis">
<div class="inner"></div>
</div>
</div>
and you click on it, it will hit .outer, then .middle, in the capture phase, which will cause doThis(...) to be called, then hit .inner in the capture phase, after which the bubbling phase begins.
Edit: Thanks for all the great responses below, I've amended the answer to fix where I was incorrect.
Both bubble and capture event handlers on an element will be triggered only once, the difference is when they are triggered (before the children or after the children). Capture mode means the handler is triggered before any handlers on child elements. Bubble mode (the default), means the handler is triggered after all child elements have finished their handlers. You can even put a capture mode and bubble mode event handler by doing <div v-on:click="doThis" v-on:click.capture="doThis">
This JS fiddle demonstrates how a single click to a nested inner element first triggers capture handlers in an "outer-to-inner" order, and then triggers bubble handlers in an "inner-to-outer" order.
I want to be able to reset all text fields to their default values when a button is clicked.
What I've done so far is query for all text fields and bind a function I wrote called 'textChanged' to the change event as follows:
require(["dojo/on","dojo/query"], function(on,query){
query(".Text").on("change",textChanged);
});
The function is defined as follows:
function textChanged(newVal)
{
...
}
I found I can reset the value in the body of the function by doing the assignment:
newVal.target.value = newVal.target.defaultValue;
If this function is triggered by a change event.
What I want to do is if a button is clicked, then I want to execute the newVal.target.value = newVal.target.defaultValue and am having trouble getting the context correct.
I've tried preserving the 'this' variable when it is called as well as preserving the 'newVal' parameter. If I try setting the value outside of the the context, then the update doesn't preserve. I've tried setting the 'this' value to some other value (nt = this) and the newValue to another variable (nv = newValue) and then I want to execute:
nv.target.value = nv.target.defaultValue;
and although it clears the field on the form, when the form is submitted, its actual value is still the manually modified value. I noticed that the 'this' is different from when I textChanged is called from the change event verses when I call it directly in my button clicked context.
I tried calling it using 'hitch' to set the context of this to its value that it had from the change event, but that doesn't seem to set the correct context:
require(["dojo/on", "dojo/_base/lang"], function(on, lang) {
lang.hitch(nt, textChanged(nv));
});
To be precise - inside textChanged I display the value of 'this' using console.log(this);
When textChanged is invoked when the text changes from the UI, 'this' is:
Yet when it is invoked from clicking my button that calls it via the
lang.hitch(nt, textChanged(nv));
'this' is:
Window fauxRedirect.lsw?applicationInstanceId=guid%3A1eae6af09bf6f543%3A-6644aeb4%3A13a8a4c429e%3A-7ffe&zWorkflowState=2&zTaskId=p1&applicationId=2&zComponentName=CoachNG&zComponentId=3028.b1094dc3-da2b-461a-8d56-f6444891c174&zDbg=2#%20%20
I've confirmed that 'nt' is indeed the same '
So, I'm trying to execute the textChanged function such that 'this' is set to that value.
Or, if there is a better way to reset a field to its default from another control - that would work as well.
Thanks in advance.
I'm not sure of the full context of what you are trying to do, so don't know if this answers your question?
You can reset all of the widgets within a form to their default value as long as they are wrapped in a dijit/form/Form widget. If all the widgets are wrapped correctly it should be a simple matter of calling reset() on the form.
NB: This will not work for native elements (ie. standard <input> or <textarea> fields, they must be dijit/form/TextBox ...etc).
eg:
<form data-dojo-type="dijit/form/Form" data-dojo-id="theForm">
<label for="field1">Field 1:</label>
<input
type="text" id="field1" name="field1"
data-dojo-type="dijit/form/TextBox" value="default1"
/><br />
<label for="field2">Field 1:</label>
<input
type="text" id="field2" name="field2"
data-dojo-type="dijit/form/TextBox" value="default2"
/>
<br /><br />
<button
type="button"
data-dojo-type="dijit/form/Button"
onclick="theForm.reset();"
>Reset</button>
</form>
Clicking the reset button here should reset the fields to: field1="default1" and feield2="default2".
The form is calling each widget's reset() method. If you create your own widgets you need to ensure that their reset() method works correctly (as well as the _getValueAttr() method for setting their value).
I have a problem with this jQuery Change function:
<input type="radio" name="words" value="8" checked><span class="word">word1</span>
<input type="radio" name="words" value="6"><span class="word">word2</span>
$("input[#name='words']:checked").change(function(){
alert("test");
});
The problem is that the event gets only triggered when I click the first option (value=8) which is checked by default.
How Can I trigger the event when clicking any other option?
Please note: I have tried the above function on both Chrome and Firefox and I have the same problem.
Thanks!
should be $("input[name='words']").change(function(){
You are only binding the event handler to :checked elements. So as the first input has the checked property set, that's the only one that receives the event handler. Remove :checked and it should work fine:
$("input[name='words']").change(function(){
alert("test");
});
Here's a working example. Note that I've also removed the # character from your selector. You haven't needed it since like jQuery 1.2 or something like that.
$("input[#name='words']:checked").change(function(){
That finds all the input elements with the name words (actually, it won't work: the XPath-style # attribute selector has been removed since jQuery 1.3) that are checked and binds an event handler to them. If the elements are not checked when the selection is made, no event handlers will be bound to them.
The easiest solution is to bind to all relevant elements, and only fire code if they have been unchecked:
$('input[name="words"]').change(function() {
if (!this.checked) { // checkbox was checked, now is not
alert('unchecked');
}
});
working link
$("input[name='words']").change(function(){
alert("test");
});
$("input[#name='words']:checked").change(function(){
alert("test");
});
You've subscribed change function only to the radiobuttons whitch is checked (:checked). Remove it from selector.
$("input[name='words']").change(function(){
alert("test");
});
Code: http://jsfiddle.net/DRasw/1/
Give id property of Radio buttons
Add property of OnClick="CheckClick()" on second redio button.
In jquery CheckClick() function
if ($('#rb2').attr('checked')) {
alert('rb2 test');
}