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:
EDIT: A Playground
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
.