按下ENTER键时，我使用了如下代码来触发click事件：
<q-tab-panel name="option1" @keyup.enter.native="$refs.button.click()">
...
<q-btn ref="button" @click="function()" />
...
</q-tab-panel>
标签属于Quasar Framework的组件。这段代码不久前就可以使用，但是现在需要进行以下更改：
<q-tab-panel name="option1" @keyup.enter.native="$refs.button.$el.click()">
也就是说，现在使用引用$refs.button.click()在按ENTER键时会产生错误：
[Vue警告]：v-on处理程序中的错误：“ TypeError：无法读取未定义的属性'defaultPrevented'”
为什么以前可以工作，为什么现在不工作？我看到有人提到它与Vue版本有关，或者引用是在组件中使用的，而不是在本机DOM元素中使用的。请参阅是否可以使用Vue.js触发事件？。我还看到了Vue-何时以及为什么使用$ el，它无法回答为什么以前不起作用，而现在却不起作用。
Vue文档对以下内容进行了说明$el：
Vue实例正在管理的根DOM元素。
这是有道理的，但没有解释为什么不需要它。就我而言，该错误发生在Vue 2.6.10中。
当前，a$ref返回Vue组件的实例。click()是要在DOM元素上调用的方法（尽管您可以click在组件中添加一个方法）。要调用它，您需要使用实际的DOM元素$el。$el返回附加了给定Vue实例的DOM节点。
话虽如此，我对它为什么能工作之前以及为什么不再工作的最好猜测是，Vue将这种行为从一个版本更改为另一个版本，并且在（如果）更改版本时注意到了这一点。
造成这种差异的另一个可能原因是，在您以前的用例中，您使用的标签不是Vue组件，而是常见的HTML标签。在那种情况下，a$ref仍会返回DOM节点。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句