Vue v-on click does not work on component

Question

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   lt  DOCTYPE html gt   lt html gt     lt head gt       lt meta charset  utf-8  gt       lt title gt vuetest lt  title gt     lt  head gt     lt body gt       lt div id  app  gt  lt  div gt       lt  -- built files will be auto injected -- gt     lt  body gt   lt  html gt    App vue   lt template gt     lt div id  app  gt       lt test v-on click  testFunction  gt  lt  test gt     lt  div gt   lt  template gt    lt script gt  import Test from    components Test   export default     name   app     methods        testFunction  function  event          console log  test clicked                components        Test        lt  script gt    Test vue  the component    lt template gt     lt div gt      click here    lt  div gt   lt  template gt    lt script gt  export default     name   test     data          return         msg   Welcome to Your Vue js App               lt  script gt

User · Answer

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       focus  function  event                  input  function  value                     and then we just need to add v-on   listeners  to the test component like   Test vue  child component    lt template gt     lt div v-on   listeners  gt      click here    lt  div gt   lt  template gt    Now the  lt test gt  component is a fully transparent wrapper  meaning it can be used exactly like a normal  lt div gt  element  all the listeners will work  without the  native modifier   Demo    x000D   x000D  Vue component  test     x000D    template    x000D       lt div class  child  v-on   listeners  gt  x000D        Click here x000D       lt  div gt   x000D     x000D   x000D  new Vue   x000D    el    myApp   x000D    data      x000D    methods    x000D      testFunction  function event    x000D        console log  test clicked   x000D        x000D      x000D     x000D  div child border 5px dotted orange  padding 20px   x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue min js  gt  lt  script gt  x000D   lt div id  myApp  gt  x000D     lt test  click  testFunction  gt  lt  test gt  x000D   lt  div gt  x000D   x000D   x000D    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    lt test  click   emit  my-event    gt  lt  test gt    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   lt test  my-event  testFunction  gt  lt  test gt    So  basically instead of v-on click or the shorthand  click we will simply use v-on my-event or just  my-event   Demo    x000D   x000D  Vue component  test     x000D    template    x000D       lt div class  child   click   emit  my-event    gt  x000D        Click here x000D       lt  div gt   x000D     x000D   x000D  new Vue   x000D    el    myApp   x000D    data      x000D    methods    x000D      testFunction  function event    x000D        console log  test clicked   x000D        x000D      x000D     x000D  div child border 5px dotted orange  padding 20px   x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue min js  gt  lt  script gt  x000D   lt div id  myApp  gt  x000D     lt test  my-event  testFunction  gt  lt  test gt  x000D   lt  div gt  x000D   x000D   x000D      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  lt div gt  only   So  with respect to this question  we will not need to update anything in Vue 3 and your code will still work fine as  lt div gt  is the root element here and it will automatically listen to all child events   Demo  1    x000D   x000D  const   createApp     Vue  x000D   x000D  const Test     x000D    template    x000D       lt div class  child  gt  x000D        Click here x000D       lt  div gt   x000D     x000D   x000D  const App     x000D    components    Test    x000D    setup     x000D      const testFunction   event   gt    x000D        console log  test clicked    x000D         x000D      return   testFunction    x000D      x000D     x000D   x000D  createApp App  mount   myApp    x000D  div child border 5px dotted orange  padding 20px   x000D   lt script src    unpkg com vue next  gt  lt  script gt  x000D   lt div id  myApp  gt  x000D     lt test v-on click  testFunction  gt  lt  test gt  x000D   lt  div gt  x000D   x000D   x000D    But for complex components with nested elements where we need to apply attributes and events to main  lt input   gt  instead of the parent label we can simply use v-bind   attrs   Demo  2    x000D   x000D  const   createApp     Vue  x000D   x000D  const BaseInput     x000D    props    label    value    x000D    template    x000D       lt label gt  x000D           label    x000D         lt input v-bind   attrs  gt  x000D       lt  label gt   x000D     x000D   x000D  const App     x000D    components    BaseInput    x000D    setup     x000D      const search   event   gt    x000D        console clear    x000D        console log  Searching      event target value   x000D         x000D      return   search    x000D      x000D     x000D   x000D  createApp App  mount   myApp    x000D  input padding 8px   x000D   lt script src    unpkg com vue next  gt  lt  script gt  x000D   lt div id  myApp  gt  x000D     lt base-input  x000D      label  Search    x000D      placeholder  Search  x000D       keyup  search  gt  x000D     lt  base-input gt  lt br  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

A bit verbose but this is how I do it   click  quot  emit  click    event  quot   UPDATE  Example added by  sparkyspider  lt div-container  click  quot doSomething quot  gt  lt  div-container gt   In div-container component     lt template gt     lt div  click  quot  emit  click    event   quot  gt The inner div lt  div gt   lt  template gt

User · Answer

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   lt blog-post    enlarge-text  onEnlargeText    gt    Component   lt button  click   emit  enlarge-text    gt    Enlarge text  lt  button gt       is the v-on shorthand   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    lt blog-post    click  onEnlargeText   gt  lt  blog-post gt     lt button  click   emit  click    gt    Enlarge text  lt  button gt    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    lt button v-on click   emit  click    event   gt    Enlarge text  lt  button gt

User · Answer

Native events of components aren t directly accessible from parent elements  Instead you should try v-on click native  testFunction   or you can emit an event from Test component as well  Like v-on click   emit  click

User · Answer

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      Child component  lt template gt     lt div id  app  gt       lt test  click   emit  test-click    gt  lt  test gt     lt  div gt   lt  template gt    Use it in HTML     Parent component  lt test  test-click  testFunction  gt

User · Answer

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    lt template gt     lt div id  app  gt       lt test v-on click native  testFunction  gt  lt  test gt     lt  div gt   lt  template gt    or in shorthand  as suggested in comment  you can as well do    lt template gt     lt div id  app  gt       lt test  click native  testFunction  gt  lt  test gt     lt  div gt   lt  template gt

User · Answer

From the documentation   Due to limitations in JavaScript  Vue cannot detect the following changes to an array    When you directly set an item with the index  e g  vm items indexOfItem    newValue When you modify the length of the array  e g  vm items length   newLength   In my case i stumbled on this problem when migrating from Angular to VUE  Fix was quite easy  but really difficult to find    setValue index        Vue set this arr  index   this arr index        this  forceUpdate       Needed to force view rerendering

[javascript] Vue v-on:click does not work on component

With Vue 2

Using `$listeners`:

Using `$emit` method:

With Vue 3

Using `v-bind="$attrs"`:

Examples related to javascript

Examples related to vue-component

Examples related to vuejs2

Examples related to vue.js