如何让Q-Tree与Q-PopupEdit协同工作？

问题1：点击编辑图标触发树节点展开/折叠 #

点击事件会冒泡到Q-Tree的header容器，触发节点展开切换逻辑。只需在图标的@click事件后添加.stop修饰符，阻止事件向上冒泡：

修改后的图标代码：

<q-icon name="delete" color="grey-5" @click.stop="console.log('delete id:'+prop.node.id)"/>
<q-icon name="edit" color="grey-5" @click.stop="console.log('edit id:'+prop.node.id)">

问题2：弹出框显示为空，无法编辑节点名称 #

问题出在绑定字段和事件处理上：

1. 你绑定的是prop.node.label，但树节点的名称字段是name（对应label-key="name"），需改为绑定prop.node.name
2. Q-PopupEdit的v-model已支持双向绑定，无需手动处理@change，Q-input直接用v-model即可

修改后的Q-PopupEdit代码：

<q-popup-edit v-model="prop.node.name">
  <q-input v-model="prop.node.name" dense autofocus counter></q-input>
</q-popup-edit>

完整修改后的代码 #

<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.stop="console.log('delete id:'+prop.node.id)"/>
    <q-icon name="edit" color="grey-5" @click.stop="console.log('edit id:'+prop.node.id)">
      <q-popup-edit v-model="prop.node.name">
        <q-input v-model="prop.node.name" dense autofocus counter></q-input>
      </q-popup-edit>
    </q-icon>
  </template>
</q-tree>

内容的提问来源于stack exchange，提问作者Burner