Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140676

Preselect checkboxes in a Vuetify list item group from an array of objects

$
0
0

I am trying to preselect checkboxes in a v-list-item-group , but can't for the life of me figure out what true-value should be set to in order for it to check the checkbox.

I have also tried changing the value of true-value to column.value, to no avail.

As opposed to most examples I have found, the model for this v-list-item-group is an array of objects, as opposed to primitives that seem to be the norm.

In the code snippet example provided (sorry, couldn't manage to make it run in the sandbox), "Column 2" should be preselected.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    defaultColumns: [{
        value: 'column1',
        text: 'Column 1',
      },
      {
        value: 'column2',
        text: 'Column 2',
      },
      {
        value: 'column3',
        text: 'Column 3'
      },
    ],
    selectedColumns: [{
      value: 'column2',
      text: 'Column 2',
    }],
  }),
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.2.13/vuetify.js"></script><div id="app"><v-app><v-list><v-subheader>
        Select columns</v-subheader><v-list-item-group v-model="selectedColumns" multiple><v-list-item v-for="column in defaultColumns" :key="column.value" :value="column"><template v-slot:default="{ active, toggle }"><v-list-item-action><v-checkbox
                :input-value="active"
                :true-value="column"
                color="primary"
                @click="toggle"
              /></v-list-item-action><v-list-item-title>
              {{ column.text }}</v-list-item-title></template></v-list-item></v-list-item-group></v-list></v-app></div>

Viewing all articles
Browse latest Browse all 140676

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>