I was using a piece of code like the following to trigger a click event when the ENTER key is pressed:
<q-tab-panel name="option1" @keyup.enter.native="$refs.button.click()">
...
<q-btn ref="button" @click="function()" />
...
</q-tab-panel>
The tags belong to components of the Quasar Framework. This piece of code was working not so long ago but now it takes this change to work:
<q-tab-panel name="option1" @keyup.enter.native="$refs.button.$el.click()">
That is, now using the reference $refs.button.click()
generates an error when ENTER is pressed:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'defaultPrevented' of undefined"
Why was it working before and why is it not working now? I have seen someone mention that it has to do with the version of Vue or the fact that the reference is being used in a component and not a native DOM element. See Is it possible to trigger events using Vue.js?. I have also seen Vue - when and why using $el, which does not answer why before it worked and now it does not.
The Vue documentation says the following about $el
:
The root DOM element that the Vue instance is managing.
Which makes sense but does not explain either why before it was not needed. In my case, the error happens with Vue 2.6.10.