Event object not passed to handler



  • Software versions

    Quasar: 0.14.9
    Vue: 2.5.0
    Vue-router: 3.0.1
    OS: Linux / CentOS 7.3
    Node: v9.2.1
    NPM: 6.3.0
    Browsers: Chrome v 58.0.3029.110 (64-bit)

    Code Sample

    <q-list>
      <div v-for="n in 5">
        <q-collapsible group="services" label="Service name" @open="getServiceDetails($event)" >
        </q-collapsible>
      </div>
    </q-list>
    
    // handler
      getServiceDetails: function(event) {
        console.log(event);  
      }
    

    Expected Result

    I expected that the event object is passed to the handler. I intend to use this to get the element on which the event was fired, so I can retrieve the label (Service name).

    Actual Result

    The event is ‘undefined’ in the event handler.

    Question

    What am I doing wrong? Thanks.



  • I found a workaround - until I can implement this in a better way. I wrapped the <q-collapsible> with a <div>, handle the v-on:click event for the wrapper div, and get the label of the <q-collapsible> element in the div using event.target.innerHTML. The <div v-on:click=handleCollapsibleWrapperClick($event)> does pass the event object down to the handler. Still looking for a the proper/better way if someone can advise.



  • @open="getServiceDetails"
    if you leave it without the ($event) it should automatically pass to the handler.



  • @Nicholas , thanks for the suggestion. However, with this change, the handler is tsill not receiving the event. Is it possible that the quasar component is absorbing the event and not bubbling it up? I am fairly new to javascript, vuejs, and quasar. Thanks.



  • That’s weird. It should work using that method.
    Have you tried doing the same thing outside of the for loop? Maybe that could be interfering with it.



  • @Nicholas Thanks. I will try that tomorrow. The Vue DevTools Plugin in Chrome sees the event being fired and can interrogate the event info, and shows the name as “open” and the source as “<q-collapsible>”. So the event is getting passed - at least to where ever DevTools is seeing it. I just need to figure out how to track its propagation up to my handler to see where it is dropped.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.