Why I am getting value of 'el' is undefined in Accordion event?

Questions
1

On app event of accordion why I am getting value of el undefined. The event is getting fired but el is undefined.

app.on('accordionOpened', function (el) {
  console.log('The following element opened:');
  console.log(el);
});
2

Hi,
i test it with f7-vue. and it works fine. Can you share more code?

3

Here is the vue component code. I am using Framework 7 v3.3.2

<template>
  <f7-page>
    <f7-navbar title="Accordion" back-link="Back"></f7-navbar>
    <f7-block-title>List View Accordion</f7-block-title>
    

    <f7-block-title>Custom Collapsible</f7-block-title>
    <f7-block inner accordion-list>
    <f7-accordion-item v-for="n in 3" :key="n" @accordion:open="onAccordionOpen" id="accor-1" title="Nested List11">
        <f7-accordion-toggle><b>Item {{n}}</b></f7-accordion-toggle>
        <f7-accordion-content>Content {{n}}</f7-accordion-content>
    </f7-accordion-item>
    </f7-block>
  </f7-page>
</template>

<script>
  import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7AccordionItem, f7AccordionToggle, f7AccordionContent, f7List, f7ListItem } from 'framework7-vue';

  export default {
    components: {
      f7Navbar,
      f7Page,
      f7BlockTitle,
      f7Block,
      f7AccordionItem,
      f7AccordionToggle,
      f7AccordionContent,
      f7List,
      f7ListItem,
    },

    mounted(){
        const self = this;
        const app =self.$f7;
        this.$f7ready((f7) => {
            f7.dialog.alert('Component mounted');
        });
        app.on('accordionClose',  function (el) {
            console.log('The following element Close:');
            console.log(el);
        });        
    },
    methods: {
        onAccordionOpen(e){
            console.log('Accordion Element Opened');
            //console.log(e);
            console.log(e.target.id);
        }
    }
}
</script>
4

try importing accordion. i test it with f7 full components.

...  
import { f7Navbar, f7Page, f7BlockTitle, f7Block, **f7Accordion** f7AccordionItem, f7AccordionToggle, f7AccordionContent, f7List, f7ListItem } from 'framework7-vue';

  export default {
    components: {
      f7Navbar,
      f7Page,
      f7BlockTitle,
      f7Block,
      **f7Accordion,**
      f7AccordionItem,
      f7AccordionToggle,
      f7AccordionContent,
      f7List,
      f7ListItem,
    },
...
5

After adding f7Accordion, I am still getting ‘undefined’.
What I am doing wrong? Are you on the same version v3.2.2

6

It is an issue in Framework7 as i see, will be fixed in next update. For now, just use @accordion:close event like you use @accordion:open