vue.jsquasar-frameworkquasar

How to get Q-Tree and Q-PopupEdit work together?


I have this code:

<q-tree
    :nodes="data"
    node-key="id"
    :key="data.length"
    label-key="name"
    ref="refTree"
    default-expand-all
    @update:selected="updated"
>
  <template v-slot:default-header="prop">
    <div class="q-mr-md">{{ prop.node.name }}</div>
    <q-icon name="delete" color="grey-5" @click="console.log('delete id:'+prop.node.id)"/>
    <q-icon name="edit" color="grey-5" @click="console.log('edit id:'+prop.node.id)">
      <q-popup-edit v-model="prop.node.label">
        <q-input :model-value="prop.node.label" dense autofocus counter @change="v => { prop.node.label = v.target.value }"></q-input>
      </q-popup-edit>
    </q-icon>
  </template>
</q-tree>

And have two Problems:

  1. If I click in the edit icon, the Popup will be show and the expanse toggle is activated. The toggle should not do. What can I do, that the mouse event only triggert the button?
  2. If the Popoup shown, the Label value isn't filled in. It's empty. How can I insert the actual Value? I want to edit the name (Label) of the Tree entry

EDIT: A Playground


Solution

  • I found the solution. Here is the working snippet:

    <q-tree
      :nodes="data"
      node-key="id"
      :key="data.length"
      label-key="name"
      ref="refTree"
      default-expand-all
      @update:selected="updated"
    >
    <template v-slot:default-header="prop">
      <div class="q-mr-md">{{ prop.node.name }}</div>
      <q-icon
        name="delete"
        color="grey-5"
        @click="console.log('delete id:'+prop.node.id)"
      />
      <q-icon 
        name="edit"
        color="grey-5"
        @click="console.log('edit id:'+prop.node.id)"
        @click.stop
      >
        <q-popup-edit v-model="prop.node.name" v-slot="scope">
          <q-input 
            v-model="scope.value"
            dense
            autofocus
            counter
            @keyup.enter="scope.set"
          ></q-input>
          </q-popup-edit>
        </q-icon>
      </template>
    </q-tree>
    

    The key facts are @click.stop and v-slot.