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

Vuetify store full object on checkbox in list group item

$
0
0

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>

Viewing all articles
Browse latest Browse all 140788

Latest Images

Trending Articles



Latest Images