How to apply filter on loaded?

[jesusvpct]

Is there any way to apply a filter when report is loaded? On pure JS I can do it, like this example:

        let r = powerbi.load(document.getElementById("embed");, embedConfig);
        r.on('loaded', async () => {
            if (typeof filter !== 'undefined' && filter.target.table !== '') {
                await r.setFilters([filter]);
            }
            if (displayPage !== null && displayPage !== '') {
                r.getPages().then(function (pages) {
                    if (Array.isArray(pages)) {
                        for (let page in pages) {
                            if (pages[page].displayName === displayPage) {
                                r.setPage(pages[page].name);
                            }
                        }
                    }
                });
            }
            r.render();
        });

But how can i do it using Vue? Thanks

[v-MadhavC]

In Vue.js, you can set up an event handler to listen for the loaded event and perform any action, such as applying filters, setting the page, or handling other custom logic when the report is loaded.

<PowerBIReportEmbed
        :embed-config="sampleReportConfig"
        :phased-embedding={ false }
        :css-class-name= { "reportClass" }
        :event-handlers= {
            new Map([
                ['loaded', async () => {
                      // Logic to apply the filter and set the page.
                    }
                ],
                ['rendered', () => console.log('Report has rendered')],
            ])
        }
>
</PowerBIReportEmbed>

For more details, you can refer to the demo code.

[jesusvpct]

I'm trying with your code, but setFilters function is not a function:

 <PowerBIReportEmbed ref="pbi"
                      v-if="!loading"
                      :phased-embedding="false"
                      :embed-config="embedConfig"
                      :event-handlers="new Map([
          ['loaded', async() => {
                await this.setFilters([props.filtro]);
          }],
          ['rendered', () => console.log('Report rendered')],
          ['error', (event) => console.log(event.detail)],
          ['pageChanged', pageChanged ]
      ])">
  </PowerBIReportEmbed>

On console: Uncaught (in promise) TypeError: this.setFilters is not a function

[v-MadhavC]

The updateFilters method is used to add, remove, or replace filters on report, page or visual. For more details refer to this documentation- Use filters in a Power BI embedded analytics report | Microsoft Learn