vm.emit on root component not working
See original GitHub issueVersion
1.0.0-beta.30
Reproduction link
https://github.com/aldarund/vue-test-utils-transition-bug
Steps to reproduce
add event to root element in vue component, try to trigger it via .vm.$emit .
Relevant test is at components/emit.test.js
If element isnt root - it works fine. If root - no emit happens
What is expected?
test is passed
What is actually happening?
test is faling
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Vue.js Can't emit event to $root element - Stack Overflow
I'm trying to $emit event to root, but it's not working. When I press enter it should emit to root and component should...
Read more >Vue2.0 parent component cannot listen to $emit event in child ...
Here is the code.Is there anything wrong?I used $on to listen to event $emit by child component, but it doesn't work.
Read more >How to catch a child's $emit in the parent with Vue? - Laracasts
I have a Vue component with a child component that creates a confirmation ... but the problem is I don't know how to...
Read more >Parent not catching events fired in child component-Vue.js
means that the root Vue is listening for the child component to emit a click event, ... So, here is an example of...
Read more >Custom Events - Vue - w3resource
Event names does not provide automatic case transformation unlike ... the component will work with v-model input: function (event) { vm.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
OK let me try to clear up whats going on. The DOM element of your tested, aka mounted component is another component’s root component. This means that when the
find('#some-id')
method starts searching, it matches all the Vue Components, that have that id for example. But in this case, they are both the tested and it’s root, so it returns both.translates to
<div class="the-child-root" />
To make your tests pass, you can:
wrapper.find('#selector').vm.$children[0].vm.$emit()
, which will give you the first child, that you actually want.@JessicaSachs @lmiller1990 @afontcu I’ve been at this, debugging for over 6 hours, until a found the issue, unfortunately I am not sure how to fix this. Technically the
match
logic is correct. The matched DOM element is the root of both components and thededupe
logic just leaves the first one.Give me your thoughts on this, maybe I can try to explain better if it did not make sense.
I tried to investigate a bit. The component does emit an event, tried with
emitted()
.This means the root’s
$listeners
are not being called.