Vue js onclick не работает

Vue v-on: щелчок не работает на компоненте

Я пытаюсь использовать директиву on click внутри компонента, но она, похоже, не работает. Когда я нажимаю на компонент, ничего не происходит, когда я должен получить «тестовый щелчок» в консоли. Я не вижу никаких ошибок в консоли, поэтому не знаю, что я делаю не так.

index.html

Приложение.Вью

Test.vue (компонент)

Ответы — Vue v-on: щелчок не работает на компоненте / Vue v-on:click does not work on component

Если вы хотите прослушать собственное событие в корневом элементе компонента, вы должны использовать модификатор .native для v-on , например:

или в стенографии, как было предложено в комментарии, вы также можете это сделать:

Я думаю, что функция $emit работает лучше для того, о чем, как мне кажется, вы просите. Он отделяет ваш компонент от экземпляра Vue, так что он может быть повторно использован во многих контекстах.

Используйте его в HTML

Собственные события компонентов не доступны непосредственно из родительских элементов. Вместо этого вы должны попробовать v-on:click.native=»testFunction» , или вы также можете испустить событие из компонента Test . Например, v-on:click=»$emit(‘click’)» .

Немного многословно но вот как я это делаю:

Обновление: пример добавлен @sparkyspider

В компоненте div-container .

Это ответ @Neps, но с подробностями.

Примечание: ответ @Saurabh более подходит, если вы не хотите изменять свой компонент или не имеете к нему доступа.

Почему @click не может просто работать?

Компоненты сложны. Один компонент может быть маленькой причудливой оберткой кнопки, а другой-целой таблицей с кучей логики внутри. Vue не знает, чего именно вы ожидаете, когда связываете v-model или используете v-on , поэтому все это должно быть обработано создателем компонента.

Как обрабатывать событие click

По данным Вью документы, $emit проходит мероприятий для родителей. Пример из документов:

Основной файл

Компонент

Компонент обрабатывает собственное событие click и излучает родительское событие @enlarge-text=». «

enlarge-text можно заменить на click , чтобы это выглядело так, как будто мы обрабатываем собственное событие щелчка:

Но это еще не все. $emit позволяет передавать определенное значение с событием. В случае native click значением является MouseEvent (событие JS, которое не имеет ничего общего с Vue).

Vue хранит это событие в переменной v-on 5. Таким образом, лучше всего было бы испустить v-on 5 с событием, чтобы создать впечатление использования собственного события:

если бы нам пришлось ввести .native , а затем корневой элемент базового входа изменился с входного на метку, то внезапно этот компонент сломался, и это не очевидно, и на самом деле вы могли бы даже не уловить его сразу, если у вас нет действительно хорошего теста. Вместо этого, избегая использования модификатора .native , который я в настоящее время считаю анти-шаблоном, будет удален в Vue 3, Вы сможете явно определить, что родитель может заботиться о том, к какому элементу добавляются слушатели.

С Vue 2

Использование $listeners :

Таким образом, если вы используете Vue 2, лучшим вариантом решения этой проблемы было бы использование полностью прозрачной логики оболочки. Для этого Vue предоставляет свойство $listeners , содержащее объект прослушивателей, используемых в компоненте. Например:

и тогда нам просто нужно добавить v-on=»$listeners» к компоненту test , например:

Test.vue (дочерний компонент)

Теперь компонент является полностью прозрачной оболочкой, то есть его можно использовать точно так же, как обычный элемент

Демонстрация:

Использование метода .native 4:

Для этой цели мы также можем использовать метод .native 4, который помогает нам прослушивать события дочерних компонентов в Родительском компоненте. Для этого нам сначала нужно создать пользовательское событие из дочернего компонента, например:

Test.vue (дочерний компонент)

Важно: всегда используйте Kebab-case для имен событий. Для получения дополнительной информации и демо-регрессии этого пункта, пожалуйста, ознакомьтесь с этим ответом: VueJS передает вычисленное значение от компонента к родителю.

Теперь нам просто нужно прослушать это испускаемое пользовательское событие в Родительском компоненте, например:

Приложение.Вью

Итак, в основном вместо .native 8 или сокращенного .native 9 мы будем просто использовать $listeners 0 или просто $listeners 1.

Демонстрация:

С Vue 3

Использование $listeners 5:

Vue 3 сделает нашу жизнь намного проще во многих отношениях. Одним из примеров этого является то, что он поможет нам создать более простую прозрачную оболочку с очень меньшим количеством конфигураций, просто используя $listeners 5. Используя это на дочерних компонентах, не только наш слушатель будет работать непосредственно от родителя, но и любой другой атрибут также будет работать так же, как и обычный

Таким образом, что касается этого вопроса, нам не нужно будет ничего обновлять в Vue 3, и ваш код все равно будет работать нормально, так как

Демо-версия № 1:

Но для сложных компонентов с вложенными элементами, где нам нужно применить атрибуты и события к основному $listeners 2 вместо родительской метки, мы можем просто использовать $listeners 5

Источник

Vue v-on: щелчок не работает на компоненте

Я пытаюсь использовать директиву on click внутри компонента, но она не работает. Когда я щелкаю по компоненту, ничего не происходит, когда я должен получить «проверенный щелчок» в консоли. Я не вижу никаких ошибок в консоли, поэтому я не знаю, что я делаю не так.

index.html

App.vue

Test.vue (компонент)

Если вы хотите прослушать собственное событие в корневом элементе компонента, вы должны использовать модификатор .native для v-on , например:

или кратко, как предлагается в комментарии, вы также можете сделать:

Я думаю, что $emit функция работает лучше, чем, по-моему, вы просите. Он хранит ваш компонент отдельно от экземпляра Vue, поэтому его можно многократно использовать во многих контекстах.

Используйте это в HTML

Это ответ @Neps, но с подробностями.

Примечание : ответ @ Saurabh будет более подходящим, если вы не хотите изменять свой компонент или не имеете к нему доступа.

Почему @click просто не работает?

Компоненты сложны. Один компонент может представлять собой небольшую необычную оболочку для кнопок, а другой — целую таблицу с кучей логики внутри. Vue не знает, что именно вы ожидаете при связывании v-model или использовании, v-on поэтому все это должно обработать создатель компонента.

Как обрабатывать событие клика

Согласно документам Vue , $emit передает события родителю. Пример из документов:

Основной файл

Составная часть

Компонент обрабатывает родные click событие и испускает родительское событие @enlarge-text=». «

enlarge-text можно заменить click на, чтобы выглядело, как будто мы обрабатываем собственное событие клика:

Но это не все. $emit позволяет передать определенное значение с событием. В случае с родным click значение MouseEvent (событие JS, которое не имеет ничего общего с Vue).

Vue сохраняет это событие в $event переменной. Итак, было бы лучше $event создать событие, чтобы создать впечатление от использования нативного события:

Немного многословно, но вот как я это делаю:

Как отметил Крис Фриц (Vue.js Core Team Emeriti ) в VueCONF US 2019

если бы у нас был ввод Kia, .native а затем корневой элемент базового ввода изменился с входа на метку, внезапно этот компонент сломался, и это не очевидно, и на самом деле, вы могли бы даже не поймать его сразу, если у вас не будет действительно хорошего теста. Вместо этого, избегая использования .native модификатора, который в настоящее время я считаю, анти-шаблон будет удален в Vue 3, вы сможете явно определить, что родитель может заботиться о том, какие слушатели элемента добавляются в .

С Vue 2

Использование $listeners :

Итак, если вы используете Vue 2, лучшим вариантом для решения этой проблемы будет использование полностью прозрачной логики оболочки . Для этого Vue предоставляет $listeners свойство, содержащее объект слушателей, используемых на компоненте. Например:

и тогда нам просто нужно добавить v-on=»$listeners» к test компоненту, как:

Test.vue (дочерний компонент)

Теперь компонент представляет собой полностью прозрачную оболочку , то есть он может использоваться точно так же, как обычный

Источник

Vue v-on: щелчок не работает на компоненте

Я пытаюсь использовать директиву on click внутри компонента, но она не работает. Когда я щелкаю по компоненту, ничего не происходит, когда я должен получить «проверенный щелчок» в консоли. Я не вижу никаких ошибок в консоли, поэтому я не знаю, что я делаю не так.

Test.vue (компонент)

5 ответов

Если вы хотите прослушать собственное событие в корневом элементе компонента, вы должны использовать . Native модификатор v-on , например:

Или кратко, как предлагается в комментарии, вы также можете сделать:

Нативные события компонентов не доступны напрямую из родительских элементов. Вместо этого вы должны попробовать v-on:click.native=»testFunction» , или вы также можете отправить событие из компонента Test . Как v-on:click=»$emit(‘click’)» .

Я думаю, что функция $emit работает лучше, чем, по-моему, вы просите. Он хранит ваш компонент отдельно от экземпляра Vue, поэтому его можно многократно использовать во многих контекстах.

Используйте это в HTML

Немного многословно, но вот как я это делаю:

Это ответ @Neps, но с подробностями.

Примечание : Ответ @ Saurabh больше подходит, если вы не хотите изменять свой компонент или нет доступа к нему.

Почему @click просто не работает?

Компоненты сложны. Один компонент может представлять собой небольшую необычную оболочку для кнопок, а другой — целую таблицу с кучей логики внутри. Vue не знает, что именно вы ожидаете, когда связываете v-model или используете v-on , поэтому все это должно обработать создатель компонента.

Как обрабатывать событие клика

Согласно Vue docs, << X0>> передает события родителю. Пример из документов:

Основной файл

Компонент обрабатывает собственное событие click и генерирует родительский @enlarge-text=». «

enlarge-text можно заменить на click , чтобы выглядело, как будто мы обрабатываем собственное событие клика:

Но это не все. $emit позволяет передать определенное значение с событием. В случае с собственным click значением является MouseEvent (событие JS, которое не имеет ничего общего с Vue).

Vue сохраняет это событие в переменной $event . Итак, было бы лучше отправить $event с событием, чтобы создать впечатление использования нативного события:

Источник

Vue v-on:click does not work on component

I’m trying to use the on click directive inside a component but it does not seem to work. When I click the component nothings happens when I should get a ‘test clicked’ in the console. I don’t see any errors in the console, so I don’t know what am I doing wrong.

index.html

App.vue

Test.vue (the component)

8 Answers 8

If you want to listen to a native event on the root element of a component, you have to use the .native modifier for v-on , like following:

or in shorthand, as suggested in comment, you can as well do:

I think the $emit function works better for what I think you’re asking for. It keeps your component separated from the Vue instance so that it is reusable in many contexts.

It’s the @Neps’ answer but with details.

Note: @Saurabh’s answer is more suitable if you don’t want to modify your component or don’t have access to it.

Why can’t @click just work?

Components are complicated. One component can be a small fancy button wrapper, and another one can be an entire table with bunch of logic inside. Vue doesn’t know what exactly you expect when bind v-model or use v-on so all of that should be processed by component’s creator.

How to handle click event

According to Vue docs, $emit passes events to parent. Example from docs:

Main file

Component

Component handles native click event and emits parent’s @enlarge-text=». «

enlarge-text can be replaced with click to make it look like we’re handling a native click event:

But that’s not all. $emit allows to pass a specific value with an event. In the case of native click , the value is MouseEvent (JS event that has nothing to do with Vue).

Vue stores that event in a $event variable. So, it’d the best to emit $event with an event to create the impression of native event usage:

As mentioned by Chris Fritz (Vue.js Core Team Emeriti) in VueCONF US 2019

if we had Kia enter .native and then the root element of the base input changed from an input to a label suddenly this component is broken and it’s not obvious and in fact, you might not even catch it right away unless you have a really good test. Instead by avoiding the use of the .native modifier which I currently consider an anti-pattern will be removed in Vue 3 you’ll be able to explicitly define that the parent might care about which element listeners are added to.

With Vue 2

Using $listeners :

So, if you are using Vue 2 a better option to resolve this issue would be to use a fully transparent wrapper logic. For this Vue provides a $listeners property containing an object of listeners being used on the component. For example:

and then we just need to add v-on=»$listeners» to the test component like:

Test.vue (child component)

Now the component is a fully transparent wrapper, meaning it can be used exactly like a normal

Demo:

Using $emit method:

We can also use $emit method for this purpose, which helps us to listen to child components events in parent component. For this, we first need to emit a custom event from child component like:

Test.vue (child component)

Important: Always use kebab-case for event names. For more information and demo regading this point please check out this answer: VueJS passing computed value from component to parent.

Now, we just need to listen to this emitted custom event in parent component like:

App.vue

So, basically instead of v-on:click or the shorthand @click we will simply use v-on:my-event or just @my-event .

Demo:

With Vue 3

Using v-bind=»$attrs» :

Vue 3 is going to make our life much easier in many ways. One of the examples for it is that it will help us to create a simpler transparent wrapper with very less config by just using v-bind=»$attrs» . By using this on child components not only our listener will work directly from the parent but also any other attribute will also work just like it a normal

So, with respect to this question, we will not need to update anything in Vue 3 and your code will still work fine as

Demo #1:

But for complex components with nested elements where we need to apply attributes and events to main instead of the parent label we can simply use v-bind=»$attrs»

Источник