CODEWITHSUNDEEP
vuetify.js
RajibTheKing
RajibTheKing

Reputation: 1342

How to Set Selected Children while Loading vuetify Treeview?

I am working with v-Treeview. I want to set already selected children while loading this tree view. To do this, I added items in array and used this array in v-model. But It's not working. I have following implementations: 

<template>
  <v-container>
    <v-treeview
      :items="checklist"
      selectable
      return-object
      dense
      hoverable
      :v-model="selectedItemList"
    />
  </v-container>
</template>

<script>
export default {
  name: 'WTreeView',

  props: {
    // Checklist of the selected card
    checklist: {
      type: Array,
      required: true,
    },
  },

  data() {
    return {
      selectedItemList: [],
    };
  },

  created() {
    this.selectedItemList.push(this.checklist[0]);
  },
};
</script>

For "checklist" I have data in the following format: enter image description here

Now what is the best way to set already selected children while loading v-Treeview? Thank You.

Upvotes: 2

Views: 5666

Answers (4)

Tim Mulry
Tim Mulry

Reputation: 81

In my experience with the v2 v-treeview, you must set the v-model after the items. i.e. If there are IDs in selectedItemList that don't exist (yet) in checklist, then none of the selected boxes will be checked. So if the checklist items are loading from a slow process, the simplest approach would be to add a conditional like processingChecklist. Then avoid rendering the list at all until the items are ready.

<v-treeview
  v-if="!processingChecklist"
  :items="checklist"
  selectable
  return-object
  dense
  hoverable
  :v-model="selectedItemList"
/>

If timing is not an issue, then make sure you filter selectedItemList to only include ids that are part of the checklist items.

Upvotes: 0

Ste Brown
Ste Brown

Reputation: 169

I don't think you can achieve this "out of the box".

I recommend using the "label" slot to add your own v-checkbox and bind the v-model to the selected property on your check list item.

Something like:

      <v-treeview :items="checklist">
                        <template v-slot:label="props">
                            <div class="treeCheckBox">
                                <v-checkbox class="treeCheckBox"
                                 v-model="props.item.selected"
                                 :label="props.item.name">
                                </v-checkbox> 
                            </div>
                        </template>
      </v-treeview>

Then all you need to do is ensure the "selected" property is set appropriately against the check list items when the data is bound to the tree view.

For more info on the using the named slot, see https://vuetifyjs.com/en/components/treeview and https://v2.vuejs.org/v2/guide/components-slots.html

In version 1.5x of veutify you may encounter spacing issues. I was able to fix this by applying the following styles to my check box and outer div:

.treeCheckBox{
margin-top: 0px;
max-height: 30px;
}

Upvotes: 1

collindoyle
collindoyle

Reputation: 61

When the vue is created, the data hasn't been filled into the controllers and neither the page is rendered.

You can consider setting the selected items in the mounted

Upvotes: 4

collindoyle
collindoyle

Reputation: 61

I have been working on a similar issue for hours and finally figured out how to get it work.

First of all, v-treeview needs a separate array of ids to keep the track of selected items. you should bind it to the value property.

Second, the timing you change the value property is critical. v-model would not load the initial values so you have to update the values after you render the page. In your code above, you set the selectedItemList in created(). But it is executed before the page is rendered. You should put it into mounted() instead.

Upvotes: 2

Related Questions