QTree select behavior

rubs

Hi,

I’m using :selected.sync="selected" in my QTree. When I click a node once it is selected. If I click it again it gets deselected. I’d like to change this behavior in such a way that when a selected node is clicked again it just does nothing, i.e. keeps the selection until I click another node. How can I do that?

Thanks in advance,

turigeza

@rubs

You have to use the @update:selected event along with the :selected property. See the pen.
https://codepen.io/turigeza/pen/rNOzjpZ

<!--
  Forked from:
  https://quasar.dev/vue-components/tree#Example--Filtering-nodes
-->
<div id="q-app">
  <div class="q-pa-md q-gutter-sm">
    <q-input ref="filter" filled v-model="filter" label="Filter">
      <template v-slot:append>
        <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter"></q-icon>
      </template>
    </q-input>

    <q-tree
      :nodes="simple"
      node-key="label"
      :filter="filter"
      @update:selected="selectNode"
      :selected="selected"
      default-expand-all
    ></q-tree>
  </div>
</div>

new Vue({
  el: '#q-app',
  data () {
    return {
      filter: '',
      selected: null,
      simple: [
        {
          label: 'Satisfied customers',
          children: [
            {
              label: 'Good food',
              children: [
                { label: 'Quality ingredients' },
                { label: 'Good recipe' }
              ]
            },
            {
              label: 'Good service (disabled node)',
              disabled: true,
              children: [
                { label: 'Prompt attention' },
                { label: 'Professional waiter' }
              ]
            },
            {
              label: 'Pleasant surroundings',
              children: [
                { label: 'Happy atmosphere' },
                { label: 'Good table presentation' },
                { label: 'Pleasing decor' }
              ]
            }
          ]
        }
      ]
    }
  },

  methods: {
    selectNode (v) {
      if(v !== null){
        this.selected = v;
      }
      return;
    },
    resetFilter () {
      this.filter = ''
      this.$refs.filter.focus()
    }
  }
})

rubs

Wow, that was fast! Thanks, great response.

rubs

Does the trick 100%, exactly what I needed!

Just a note, :selected.sync="selected" must be replaced by :selected="selected", otherwise this won’t work. So this is at least one exception to the “.sync” modifier required rule. Maybe the doc needs to be updated to reflect this.

Thanks again.

turigeza

@rubs I guess so. The name however sort of implies. Should it say … “.sync” modifier required if you wanted it to sync : ) ? You will find it is a basic Vue modifier which you kind of have to know. Like v-model and input and value. Anyway good luck with it I am glad it helps.

Mickey58

@turigeza, @rubs - thanks for this code snippet. I successfully use it in my q-trees now (I have more than q-tree one in my app…). It is a great and simple solution to an annoying little problem - can’t count how often I accidentally deslected the selected node in those trees already while testing. That little change in the code handling the node selection eliminates that usability problem.

QuaSam

Thanks. A question: I would like to allow selection only by leaf nodes, but prefer not to have check boxes. Is there a way to restrict selection to leaf nodes without using ticks? If not, is there a convenient method to detect if a selected parent node is non-leaf? (Lack of children nodes would indicate this, but is this the best/only way to identify leaves?)

turigeza

@QuaSam
I don’t know of an easier method than the way you are describing it. So node have the property selectable and you should set those true or false depending the node has children or not.
https://quasar.dev/vue-components/tree#Nodes-model-structure

QuaSam

Thanks for pointing this link out; I have read that but will re-read as I often overlook some details that will explain how to do what is needed. It looks like the node may be set selectable even if no ticks are involved. However, the nodes are built up with a v-for routine, and how to set leaves selectable but parents non-selectable is not clear.

No More Posting New Topics!

QTree select behavior