[SOLVED] Not able to use QPopupEdit inside default-header (scoped-slot) of QTree component

[vonSansberg]

Hi,

I’m still getting console error with message “[Vue warn]: Error in v-on handler: "TypeError: _this2.watcher is not a function” (from QPopupEdit component)
while using QPopupEdit inside of QTree “default-header” scoped-slot.
If I copy the code with interpolated variable and with <q-popup-edit> bellow and place it somewhere else, then it works.

What I found so far is that QPopupEdit “show” event does not even fire. So the watcher method is not set and when “before-hide” event triggers, no watcher exists.

Also interesting thing is if I move that part as it is in “default-body” scoped slot with the same { node } context it magically works.

Thanks for any help or clue

<q-tree
    v-if="nodes.length > 0"
    :nodes="nodes"
    node-key="key"
    :expanded.sync="expanded"
    :filter="filter"
    default-expand-all
    class="overflow-auto q-pa-xs"
>
    <template v-slot:default-header="{ node }"> // SCOPED SLOT CONTEXT HERE
        <div class="row items-center">
            <q-checkbox v-model="node.used" v-if="!node.root" />
            <div class="text-weight-bold text-primary">
                <span v-if="node.type == 'object' && !node.root">{ } </span>
                <span v-if="node.type == 'array'  && !node.root">[ ] </span>
                <span v-text="node.label"></span>
                <span v-if="node.type !== 'object' && node.type !== 'array'">
                    // STARTS HERE 
                    <span class="node-value">: {{ node.value | truncate }}</span>
                    <q-tooltip anchor="center right" self="center left">
                        <q-icon name="edit" color="white" size="16px" class="q-mr-xs" />Click to edit
                    </q-tooltip>
                    <q-popup-edit v-model="node.value">
                        <q-input v-model="node.value" dense autofocus counter />
                    </q-popup-edit>
                    // ENDS HERE 
                </span>
            </div>
        </div>
    </template>
</q-tree>

[metalsadman]

@vonSansberg try this https://codepen.io/metalsadman/pen/OJJVGKr?&editable=true&editors=101, you’ll have to catch the event to stop the expanding event triggering tho.

[vonSansberg]

hello @metalsadman thank you for your response… I’ll check your example, review my code and I will answer you soon…

[vonSansberg]

TLDR; “@click.stop” is the key thx @metalsadman

[metalsadman]

@vonSansberg kind of late, but glad I could help