Почему иногда требуется $ el при использовании $ refs в Vue? - PullRequest
Новая
       10

Почему иногда требуется $ el при использовании $ refs в Vue?

1 голос
/ 24 октября 2019

Я использовал фрагмент кода, подобный следующему, чтобы вызвать событие click при нажатии клавиши ENTER : 

<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 warn]: ошибка в обработчике v-on: «Ошибка типа: невозможно прочитать свойство defaultPrevented из undefined»

Почему это работало раньше ипочему это не работает сейчас? Я видел, как кто-то упоминал, что это связано с версией Vue или с тем, что ссылка используется в компоненте, а не в элементе DOM. См. Можно ли запускать события, используя Vue.js? . Я также видел Vue - когда и почему используется $ el , который не отвечает, почему раньше он работал, а теперь нет.

В документации Vue говорится о $el:

Корневой элемент DOM, которым управляет экземпляр Vue.

Это имеет смысл, но не объясняет, почему до того, как он не понадобился. В моем случае ошибка происходит с Vue 2.6.10.

1 Ответ

1 голос
/ 24 октября 2019

В настоящее время $ref возвращает экземпляр компонента Vue. click() - это метод, предназначенный для вызова элемента DOM (хотя вы можете добавить метод click к вашему компоненту). Чтобы вызвать его, вам нужны фактические элементы DOM, для чего и нужен $el. $el возвращает узел DOM, к которому присоединен данный экземпляр Vue.

При этом, я думаю, почему я работал раньше и почему он больше не работает, - то, что Vue изменил это поведение содна версия к другой, и вы заметили это, когда (если) вы изменили версии.

Другая возможная причина различия заключается в том, что, возможно, в ваших предыдущих случаях использования вы использовали ссылки на теги, которые не были компонентами Vue,но общие теги HTML. В этом случае $ref по-прежнему будет возвращать узел DOM.

...