Event object not passed to handler

James

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.

James

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.

Nicholas

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

James

@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.

Nicholas

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.

James

@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.

James

I have been able to reproduce this with a clean Quasar app.
The code of interest is:

    <!-- Right Side Panel -->
    <div slot="right">
      <span>Right side</span>
      <q-collapsible label="Test Collapsible" @open="collapsibleOpened($event)">
        Test Content
      </q-collapsible>
    </div>

  methods: {
    collapsibleOpened: function (event) {
      console.log(event)
    }
  }

The event in the handler is “undefined”. I have tried it without passing $event in to the handler as well. Same result.
Any help with what I am doing wrong is appreciated. Thanks.

James

I think the 0.14.* and the current ‘dev’ branch have this issue of not firing the open and close event on the QCollapsible. I made the following changes to Quasar locally and it works as I expect. I would submit a PR, but I do not have the test environments setup as required in the PR submission guidelines. If this looks correct, will someone else include this in one of your PRs, assuming you are able to test it? If it looks like I am still not using this component properly, please provide guidance. Thanks.

I added the following to /src/components/collapsible/QCollapsible.js:

  data: function () {
    return {
      isOpen: this.opened
    }
  },

and updated the following methods:

   __toggleItem () {
      if (!this.iconToggle) {
        this.toggle()
        if (this.isOpen) {
          this.$emit('close', this)
          this.isOpen = false
        }
        else {
          this.$emit('open', this)
          this.isOpen = true
        }
      }
    },
    __toggleIcon (e) {
      if (this.iconToggle) {
        e && e.stopPropagation()
        this.toggle()
        if (this.isOpen) {
          this.$emit('close', this)
          this.isOpen = false
        }
        else {
          this.$emit('open', this)
          this.isOpen = true
        }
      }
    },

I updated my 0.14.9 version by updating the following in /dist/quasar.esm.js:

  watch: {
    opened: function opened (value) {
      this.active = value;
    },
    active: function active (val) {
      if (val && this.group) {
        Events.$emit(eventName, this);
      }
      if ( val ) {
        this.$emit('open', this)
      }
      else {
        this.$emit('close', this)
      }
      // this.$emit(val ? 'open' : 'close');
    }

Also, I think a new event object should be created and passed instead of the ‘this’ that I am using above.

benoitranque

Do you know if this is still an issue in v0.15?

Vuesogood

This post is deleted!

No More Posting New Topics!

Event object not passed to handler