q-tree : how to validate a selection?

[Zambiorix]

I am using a q-tree in my drawer to navigate through a set of pages.

How can I prevent the change of the selected node?
For example, if my page has some unsaved changes, I want to show a dialog, instead of navigating away from that page.

Thank you
Cheers
Gerd

[manimovassagh]

QTree does not have a built-in before-select hook, but you can handle this by using v-model with a watcher (or the @update:selected event) to intercept and conditionally revert the selection.

Here's a pattern that works:

<template>
  <q-tree
    :nodes="nodes"
    node-key="id"
    v-model:selected="selectedNode"
    @update:selected="onSelectionChange"
  />

  <q-dialog v-model="showConfirm">
    <q-card>
      <q-card-section>You have unsaved changes. Leave anyway?</q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="Stay" @click="revertSelection" />
        <q-btn flat label="Leave" @click="confirmSelection" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";

const selectedNode = ref("page-1");
const previousNode = ref("page-1");
const pendingNode = ref(null);
const showConfirm = ref(false);
const hasUnsavedChanges = ref(false);

function onSelectionChange(newKey) {
  if (hasUnsavedChanges.value && newKey !== previousNode.value) {
    pendingNode.value = newKey;
    // Immediately revert — the dialog will decide what happens
    selectedNode.value = previousNode.value;
    showConfirm.value = true;
  } else {
    previousNode.value = newKey;
  }
}

function confirmSelection() {
  hasUnsavedChanges.value = false;
  selectedNode.value = pendingNode.value;
  previousNode.value = pendingNode.value;
  showConfirm.value = false;
}

function revertSelection() {
  pendingNode.value = null;
  showConfirm.value = false;
}
</script>

The key insight: when the user clicks a new node, you immediately set selectedNode back to the previous value (so the tree visually stays put), show your confirmation dialog, and only commit the new selection if the user confirms.

This gives you full control over navigation guards without needing a before-select prop.