Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. vonSansberg
    V
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 4
    • Best 0
    • Groups 0

    vonSansberg

    @vonSansberg

    0
    Reputation
    76
    Profile views
    4
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    vonSansberg Follow

    Latest posts made by vonSansberg

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

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

      posted in Help
      V
      vonSansberg
    • RE: [SOLVED] Not able to use QPopupEdit inside default-header (scoped-slot) of QTree component

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

      posted in Help
      V
      vonSansberg
    • [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 🙂

      <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>
      
      posted in Help
      V
      vonSansberg