Customizing the v-list-item in v-select multiple

[joaopalopes24]

I want to make a v-list-item by customizing it, but making the checkbox tick when the value is selecting, without needing to check the v-model, any ideas?

<v-select :items="[1, 2, 3]" hide-details multiple>
  <template #item>
    <v-list-item height="36" link>
      <div class="flex items-center space-x-1">
        <v-checkbox class="h-8 -mt-2" hide-details />
  
        <p class="text-sm">
          {{ data.props.title }}
        </p>
      </div>
    </v-list-item>
  </template>
</v-select>

I can't bind the props to the v-list-item, but the checkbox doesn't work together.

[angrymarker]

your code doesn't work as is. Example below of how I got it to work.

the <template #item> must contain a v-list-item as per the docs, with a v-bind=props on it.

from there, you can prepend the vcheckbox, and assign the model-value as true when it is selected.

https://play.vuetifyjs.com/#eNq1Uk2LgzAQ/SvBS1uo9i5tYQ97WdjTsqfaQzSzbTDGkES3IP73TcbGKpRCC5uDZmZe3rz5OHSR0cXmTamkbSBKo62FSglqYZ9JQrZtbEBAYb1BSMpd1OyyCP9ZNHi9EVtuBbiIpBWEgKA5COf7NqCDr2qE5UrAYLVxVTPEtFQ014eY2eUOShzKiNpicofsiNK1MmvMS/osuuJRreDGxhho45xL5vCIziKSmiYPKj0i0fQ3YaCothVIO+G5k1tpUCDZBILpijMUZV5fpm5CzpxBzMBSLsw8kmK5MRYbik64LETDwCxHVb6Jq9Cx4ey3m1u6qdLNbGCDa9KH0Mw5zEOGwaLZdaik7zM5AzrTFJqrAQUXVWtLGPxQN0TSDcyMWpqS5Yrs9mR59bnBer6UHI7r4MGVcZ6b9BHsjy85JYuP+iwX4xvkHyfkwp9Ul2C5PE0x/eR+l5NKeMD5Lk9cAuhnWetHpF9UgHlWpP0HlbR8JPPFfhbla6WHbehXeMF1Gxcs6teyEQI/xz+bKVQR

[joaopalopes24]

@angrymarker Thanks for the help, I ended up having managed to solve it and forgot to post it here. Thank you very much.