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

  • 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 🙂

        v-if="nodes.length > 0"
        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-popup-edit v-model="node.value">
                            <q-input v-model="node.value" dense autofocus counter />
                        // ENDS HERE 

  • @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.

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

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

  • @vonSansberg kind of late, but glad I could help 🙂