How to close collapse on clicking on a button using vuejs and quasar?

Question

I'm using <q-collapsible> tag for a collapse action. That is working fine. But I need to close the collapse by clicking some other button through Vue js only.

Since I'm using quasar it has some functionalities like open() and close() and I don't know how to implement it. So if possible someone helps me how to proceed.

Answer 1

This can be done easily since quasar provides this functionality out of the box.

First, reference your quasar component

<q-collapsible ref="myCollapsible">
   ...
</q-collapsible>

<button @click="toggleCollapsible">toggle collapsible</button>

Then, execute the needed method

methods: {
  toggleCollapsible () {
    this.$refs.myCollapsible.toggle()
  }
}

This is for toggle, you can do the same with open and close.