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 🙂

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


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