Uncheck all treeview checkboxes

Question

I have a v-treeview component (Vuetify 2.6.7)

<v-treeview
            class="location-tree"
            v-model="location_tree"
            ref="location_tree"
            :search="location_search"
            selectable
            dense=true
            open-on-click=true
            expand-icon="$plus"
            selected-color="success"
            :items="locations"
            selection-type="all"
            transition=true
            @input="location_tree_update"
></v-treeview>

How can I uncheck all checkboxes with a some button click?

Answer 1

you just need to empty the array you passed to v-model on a button click like location_tree.splice(0) or location_tree = [].

check the example below:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selection: [],
    items: [{
        id: 1,
        name: 'Applications :',
        children: [{
            id: 2,
            name: 'Calendar : app'
          },
          {
            id: 3,
            name: 'Chrome : app'
          },
          {
            id: 4,
            name: 'Webstorm : app'
          },
        ],
      },
      {
        id: 5,
        name: 'Documents :',
        children: [{
            id: 6,
            name: 'vuetify :',
            children: [{
              id: 7,
              name: 'src :',
              children: [{
                  id: 8,
                  name: 'index : ts'
                },
                {
                  id: 9,
                  name: 'bootstrap : ts'
                },
              ],
            }, ],
          },
          {
            id: 10,
            name: 'material2 :',
            children: [{
              id: 11,
              name: 'src :',
              children: [{
                  id: 12,
                  name: 'v-btn : ts'
                },
                {
                  id: 13,
                  name: 'v-card : ts'
                },
                {
                  id: 14,
                  name: 'v-window : ts'
                },
              ],
            }, ],
          },
        ],
      },
      {
        id: 15,
        name: 'Downloads :',
        children: [{
            id: 16,
            name: 'October : pdf'
          },
          {
            id: 17,
            name: 'November : pdf'
          },
          {
            id: 18,
            name: 'Tutorial : html'
          },
        ],
      },
      {
        id: 19,
        name: 'Videos :',
        children: [{
            id: 20,
            name: 'Tutorials :',
            children: [{
                id: 21,
                name: 'Basic layouts : mp4'
              },
              {
                id: 22,
                name: 'Advanced techniques : mp4'
              },
              {
                id: 23,
                name: 'All about app : dir'
              },
            ],
          },
          {
            id: 24,
            name: 'Intro : mov'
          },
          {
            id: 25,
            name: 'Conference introduction : avi'
          },
        ],
      },
    ],
  }),
});

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-btn color="primary" @click="selection.splice(0)">clear selection</v-btn>
      <v-treeview v-model="selection" selectable :items="items"></v-treeview>
    </v-container>
  </v-app>
</div>