Im new to VueJS.
I'm trying to understand the syntax behind emitting events.
There is the following video tutorial where I'm having problems understanding what happens:
https://www.youtube.com/watch?v=5pvG6fzkdFM
Here is the code:
Inside parent:
https://imgur.com/bxcyjZq
https://imgur.com/Rynifqq
And Child (emitting component):
https://imgur.com/iHh3zc3
Now, the first thing I very much DONT understand is how the "v-on:CustomEvent" actually works.
v-on, as I understand it, attaches an event handler. But it doesnt specify it, does it? I usually have to type "v-on:click". So why does anything happen at all in this tutorial when this code is executed? Nowhere is there a definition what kind of event shall trigger the function.
And the second thing is how the data is handled.
In the header, inside the parameter of the function, $event is handed over.
But how is this supposed to give any useful data? The event usually is an object where I have to get the payload extracted manually, like event.target.value?
So why does this work?
You code looks fine, there is no fix needed
Alternate way is, no need to mention $event, it automatically pass with the arguments by just mentioning the method name
<app-header v-bind:title="title" v-on:changeTitle="updateTitle"></app-header>
Related
I'm writing a vue.js application with the v-currency-field package: https://www.npmjs.com/package/v-currency-field
When I read the documentation, I see nothing for a blur event (or any events at all): https://phiny1.github.io/v-currency-field/started.html#introduction
I'm getting around this by selecting the input inside the v-currency-field like this:
const holdbackAmountInput = document.querySelectorAll('[aria-label="Holdback amount"]')[0];
holdbackAmountInput.addEventListener('blur', this.holdbackAmountInputBlurHandler);
But is there not a better way to do this? It gets more complicated than the above code because I have to run it in the updated() hook and check if the holdbackAmountInput exists, and if it does, I have to assign it to a data object so that I have a reference to it when I have to remove the event listener when it's removed from the DOM or when the component is destroyed. Seems needlessly complicated for something that should be really simple.
Is there not a simpler way to do this?
I want to check the list of event listeners that are added. For example, I used the code cy.on('pan zoom resize', update); and added function called update in for loop. I do this many times. I also call cy.off('pan zoom resize', update); to remove the event listeners but I want to be sure about it.
The only think I can think of is using console.log but this method might not be helpful.
I also think that in some places people forgot to remove the event listeners and just always added. With too many repetitions this might cause problems.
There is a data field in the private cytoscape object called listeners. You can see that if you:
console.log() the cy object,
navigate to _private,
then open the emitter object
and lastly go to listeners
This is the array listing all the default and user defined event listeners with some metadata like the event, type and scope of the listener.
You can access this in your code by simply calling
cy.emitter().listeners
The question now is, why do you need this information in the first place? Normally, you should be just fine if you call cy.off('eventXY', ...) before using any cy.on('eventXY', ...). Are you sure you need this for your application to work? Maybe elaborate more on the core problem (why you want these information in the first place).
Thanks and have a great day!
I have strange (at least to me) problem with multiple checkboxes with v-model. When using multiple checkboxes that are v-model'ed to one property then normal array is produced which is done with code below:
.form-check
input.form-check-input(type=“checkbox” name=“checkbox” v-model=“methodology” value=“issue tracking tool”)
label.form-check-label issue tracking tool
However, when I try to move it to Single File Component I had to copy some magical tricks from Vue.js forum to make it work. I still suspect that there must be easier way to achieve it. I can’t imagine that it wasn’t solved with simple solutions since it’s quite a common pattern (checkbox in a component - nothing exotic, right?). Any help appreciated!
Here is the working jsfiddle - please have in mind that there is no errors. I just want to know if that really has to be that complicated.
The answer is, no. You may be able to do this magic differently, but it needs to be done.
Vue has to do magic behind the scenes for checkbox because unlike all the other inputs, which have a single item that gets updated, the checkbox has to manage whether the a value is in an array. This means that the listeners and values have to be patched between the wrapper and input.
I was able to get Aurelia-validation working on a dynamically created form when using the compose element, but I've switched to custom elements for better encapsulation and reuse of the custom controls. However, now my validation seems to be half-broken.
https://gist.run/?id=6e97538c3888cae0f6134faed9d67362
Issue 1: The ValidateBindingBehavior is not doing anything. I suspect it's not finding the controller or matching the rules since the property name is not easily visible in the binding (due to dynamic controls).
Issue 2: For some reason validate() on submit actually only shows the first error instead of all of them. That indicates a problem but I don't know what.
Can anyone get the attached GistRun to work properly?
https://github.com/yuche/vue-strap/blob/master/src/Spinner.vue
https://github.com/yuche/vue-strap/blob/master/docs/example/spinnerDocs.vue
Looking at the reference implementation, I've tried to do the same here: https://jsfiddle.net/gw3br69r/2/
I've tried listening to different events like show, show:spinner, spinner, spinner:shown, etc, and have also tried to listen to the event via $on detailed here: https://vuejs.org/api/#vm-on and https://vuejs.org/guide/components.html#Parent-Child-Communication but I'm unable to listen to that event. I have also tried the non minified debug build of vue.js, but I do not know of a way to track down all the events to see if shown:spinner is even getting called.
Your code would work if the Spinner component used $dispatch() to "propagate upward along the parent chain".
But looking at the source code, we see that $broadcast() is used, to "propagate downward to all descendants".
I don't know why they are broadcasting instead of dispatching, and I don't understand how their documentation example works. It seems impossible. Something must have been tweaked or changed.
Anyway, an event broadcasted by a "child" can be listened by its "parent" by using v-on. It goes like this:
<spinner v-on:shown::spinner="doSomething"></spinner>
See the working fiddle: https://jsfiddle.net/x80ph0mk/1/