[V2] Framework7-Vue Action Sheet Not Working

Questions
1

I’m now using Framework7-Vue V2.

I modified the first line of the example from https://framework7.io/vue/action-sheet.html to test the event callback with the following code

<!-- Actions -->
<f7-actions :opened="actionOpened" @actions:closed="onActionClosed">
  <!-- Actions Group -->
  <f7-actions-group>
    <!-- Actions Label -->
    <f7-actions-label>Hello</f7-actions-label>
    <!-- Actions Buttons -->
    <f7-actions-button>Button 1</f7-actions-button>
    <f7-actions-button>Button 2</f7-actions-button>
  </f7-actions-group>
  <!-- Another Group -->
  <f7-actions-group>
    <!-- Cancel/Close Button -->
    <f7-actions-button color="red" bold>Cancel</f7-actions-button>
  </f7-actions-group>
</f7-actions>

But the event @actions:closed was not fired no matter I close the action sheet or click any button on the action sheet.

If I click the action sheet, it’ll give me additional error message:

framework7.esm.bundle.js?c501:8179 Uncaught TypeError: Cannot read property '0' of undefined
at HTMLDivElement.buttonOnClick (framework7.esm.bundle.js?c501:8179)
at HTMLDivElement.handleEvent (dom7.module.js?d8c4:321)
at sendClick (framework7.esm.bundle.js?c501:1658)
at Framework7$1.handleTouchEnd (framework7.esm.bundle.js?c501:1850)
at eval (framework7.esm.bundle.js?c501:607)
at Array.forEach (<anonymous>)
at eval (framework7.esm.bundle.js?c501:607)
at Array.forEach (<anonymous>)
at Framework7$1.emit (framework7.esm.bundle.js?c501:607)
at emitAppTouchEvent (framework7.esm.bundle.js?c501:1866)

How should I fix this?
Or is there any alternatives?

Thanks

2

I have also found this problem - [v2] f7-actions events not triggering and error occurs on clicking at button
There is some bug, for temporary solution try this:
export default {
....
mounted() {
document.addEventListener('actions:closed', () => {
this. onActionClosed()
})
},
}

3

Thanks! it works.
Do you know anything about the error message?
Can I just leave it there or is there any work around that I can make the error message disappear?

4

I think by the next release this error should be fixed. There are some commits were made a few days ago -
https://github.com/framework7io/framework7-vue/commit/b07b284ffcd8ca01bdb26dbf02792f15767372b3

1 Like
5

Yeah, it is already fixed in dev and will be in upcoming update