Vuetify Item group how to preselect item?

Question

I am trying to preselect item from vuetify item-group. It works for string but not for objects. In the vuetify document, they have used string array as the item list for the item-group. It works fine.

If I try to use an object array as the item list it doesn't work

<div id="app">
  <v-app id="inspire">
    <v-card class="mx-auto" max-width="500">
      <v-list shaped>
        <v-list-item-group v-model="model" multiple>
          <template v-for="(item, i) in items">
                <v-divider
                  v-if="!item"
                  :key="`divider-${i}`"
                ></v-divider>

                <v-list-item
                  v-else
                  :key="`item-${i}`"
                  :value="item"
                  active-class="deep-purple--text text--accent-4"
                >
                  <template v-slot:default="{ active, toggle }">
                    <v-list-item-content>
                      <v-list-item-title v-text="item.name"></v-list-item-title>
                    </v-list-item-content>

                    <v-list-item-action>
                      <v-checkbox
                        :input-value="active"
                        :true-value="item"
                        color="deep-purple accent-4"
                        @click="toggle"
                      ></v-checkbox>
                    </v-list-item-action>
                  </template>
          </v-list-item>
          </template>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      { name: "Connect"}
    ],
    model: [{name: "Connect"}]
  }),
})

Answer 1

You can implement using unique value from your data, it can be a id or something else. You need to pass you unique value inside of your model in form of Array and then the same unique value should be configure with your <v-list-item>.

Please check code snippet and working Codepen demo.

---

Code snippet:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [],
    model: [1, 3, 6]
  }),
  methods: {
    getValue(item) {
      return `${item.id}. - ${item.title.toLocaleUpperCase()}`;
    }
  },
  created: function() {
    let self = this;
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => self.$data.items = json)
  }
});

<div id="app">
  <v-app id="inspire">
    <v-card class="mx-auto" max-width="100%">
      <v-list shaped>
        <v-toolbar color="indigo" dark>
          <v-toolbar-title>List posts :- jsonplaceholder</v-toolbar-title>
        </v-toolbar> <br/>
        <v-list-item-group v-model="model" multiple>
          <template v-for="(item, i) in items">
                <v-divider
                  v-if="!item"
                  :key="`divider-${i}`"
                ></v-divider>
      
                <v-list-item
                  v-else
                  :key="`item-${i}`"
                  :value="item.id"
                  active-class="deep-purple--text text--accent-4"
                >
                  <template v-slot:default="{ active, toggle }" >
                    
                    <v-list-item-content>
                      <v-list-item-title v-text="getValue(item)"></v-list-item-title>
                    </v-list-item-content>
      
                    <v-list-item-action>
                      <v-checkbox
                        :input-value="active"
                        :true-value="item.id"
                        color="deep-purple accent-4"
                        @click="toggle"
                      ></v-checkbox>
                    </v-list-item-action>
                  </template>
          </v-list-item>
          </template>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>