I'm using Vuetify 2.1 with Vue.js 2.6. Here is my codepen.
So I need to store the service object in the checkbox because in the next step I need all properties of service. Before I already do that checkout my 2nd codepen. But I can't do the same thing because on the 2nd codepen the subtitle not working, if I have a long text the text will be out of the card.
So I used list group item to fix the subtitle, but now I can't store the full object in the checkbox and list group item return only index of selected item...
Do you know how can I use value
props on my checkbox instead of input-value
to store my service object ?
<div id="app">
<v-app>
<v-content>
<v-container>
Enabled services : {{enabledServices}}
<v-list class="mt-5">
<h3 class="primary--text mb-3">Services</h3>
<v-list-item-group v-model="enabledServices" multiple>
<template v-for="(service, index) in services">
<v-list-item :key="service.id">
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox v-model="active" color="secondary" :input-value="service"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="service.name"></v-list-item-title>
<v-list-item-subtitle v-text="service.detail"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-list-item-action-text v-text="service.price + '€'">
</v-list-item-action-text>
</v-list-item-action>
</template>
</v-list-item>
</template>
</v-list-item-group>
<v-btn block color="primary" class="title mt-5" style="height: 50px;">
Pay {{ totalPrice }} €
</v-btn>
</v-list>
</v-container>
</v-content>
</v-app>
</div>