Vuetify: [Bug Report] v-select custom item slot doesn't respond properly to item selection

Created on 4 Oct 2019  路  2Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.0.20
Last working version: 1.5.0
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Mac OS 10.14.6

Steps to reproduce

Add a checkbox to a v-select's item slot

Expected Behavior

Toggle the checkbox state when item is selected

Actual Behavior

Can't supply any info to the v-select or to bind the custom checkbox

Reproduction Link

https://codepen.io/anon/pen/rPGGMG?editors=1010

Other comments

The codepen link shows a functional example. The problem is that, when I try to use that solution on vuetify 2.0, I can't make it work.

VSelect documentation

Most helpful comment

I thought I had the same issue at first but managed to do. Here is the proper implementation:

<template v-slot:item="data"
    <v-list-item v-bind="data.attrs" v-on="data.on">
        <v-list-item-action >
            <v-checkbox :value="data.attrs.inputValue" @change="data.parent.$emit('select')" ></v-checkbox>
        </v-list-item-action>
        <v-list-item-content>
            <v-list-item-title v-html="data.item.first_name"></v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</template>

All 2 comments

I thought I had the same issue at first but managed to do. Here is the proper implementation:

<template v-slot:item="data"
    <v-list-item v-bind="data.attrs" v-on="data.on">
        <v-list-item-action >
            <v-checkbox :value="data.attrs.inputValue" @change="data.parent.$emit('select')" ></v-checkbox>
        </v-list-item-action>
        <v-list-item-content>
            <v-list-item-title v-html="data.item.first_name"></v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</template>

This could do with an example implementation.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sebastianmacias picture sebastianmacias  路  3Comments

paladin2005 picture paladin2005  路  3Comments

jofftiquez picture jofftiquez  路  3Comments

itanka9 picture itanka9  路  3Comments

gluons picture gluons  路  3Comments