Scope problem with reused component and global sheet

I have created a toolbar component with some props, which i use on several pages on my app.
Inside the component i have a button, which triggers an action sheet and the action sheet has an action button, which on click should trigger a method in my toolbar component. The action sheets markup itself is inside the template of my toolbar component.

Now the problem is, as the action sheet is global, it always invokes the method of the toolbar component which was created first.

What i want is to call the method of the toolbar component instance, which opened the action sheet.
Is this somehow possible?

Otherwise i see no possibility to access the probs of the toolbar component which invoked the action sheet…

Thanks in advance!

Would be good to see some code examples

Ok, i ripped the essential code out of my application, hope it makes any sense.

Toolbar component:

<template>
    <div>

        <div class="toolbar">
            <f7-link v-on:click="checkDelete">
                <i class="fal fa-trash-alt"></i>
            </f7-link>
        </div>

        <f7-actions class="confirm-delete">
            <f7-actions-group>
                <f7-actions-label>Delete?</f7-actions-label>
                <f7-actions-button color="red" @click="doDelete">Delete</f7-actions-button>
            </f7-actions-group>
            <f7-actions-group>
                <f7-actions-button bold>Cancel</f7-actions-button>
            </f7-actions-group>
        </f7-actions>
        
    </div>
</template>

<script>
    export default {
        name: 'Toolbar',
        data() {
            return {};
        },


        props: {
            myProp: String
        },

        computed: {
            isZero: function () {
                return false;
            }
        },

        methods: {
            doDelete: function () {
                console.log(this)
                console.log(this.myProb)
            },

            checkDelete: function () {
                if (this.isZero) {
                    // do something else...
                } else {
                    this.$f7.sheet.open('.confirm-delete', true);
                }
            },
        }
    };
</script>

No, i use this component on two pages (A and B) like so:

<toolbar my-prob="Test1"></toolbar>

and

<toolbar my-prob="Test2"></toolbar>

Page A was loaded and then i navigate to Page B, so both pages are instantiated.
When i click the delete button on my toolbar on page B, the action sheet is presented.
If i now click on the action button “Delete”, my doDelete-function is called.

But this is always the doDelete-Function of the toolbar component on Page A.
(It prints always “Test1” on the console)

I want the function inside the component on Page B to be called, but i can’t see a way, how to bind the correct scope to the action sheet.

Hope this makes things a bit better understandable…

It happens because you reference Actions by class name, and you have same classes. It is better to use ref then:

<f7-actions class="confirm-delete" ref="actions">
...
</f7-actions>
var actionsEl = this.refs.actions.$el;
this.$f7.sheet.open(actionsEl, true);
1 Like

Great, that did the trick.

Thanks very much!