CODEWITHSUNDEEP
vuetify.js
Lyle Phillips
Lyle Phillips

Reputation: 377

How to apply vuetify transitions to <v-select> element

Good day guys, today i'm battling with something rather simple but to which i cannot seem to find the answer. I'm looking to apply transition="fab-transition" to all of the select items on my form. However it seem to only work on v-menu items. On the form i have two v-select and one v-menu. The v-menu transition work fine but the v-selects does not do anything. Below is my code, thanks in advance i know you guys are all super smart :)

<v-select :items='locations' item-text='name' 
          item-value='id' label='Select Location' 
          prepend-icon="local_hospital" 
          v-model='appointment.location_id' 
          :rules="[v => !!v || 'Please Select Location']"
          transition="fab-transition">
</v-select>

<v-select :items='patient.patients' item-text='name' 
          item-value='id' label='Select Patient' 
          prepend-icon="face" 
          v-model='appointment.patient_id' 
          :rules="[v => !!v || 'Please Select Patient']"
          transition="fab-transition">
</v-select>

    <v-menu v-model="menu"
            :close-on-content-click="false"
            :nudge-right="40"
            offset-y
            min-width="290px"
            transition="fab-transition">
            <template v-slot:activator="{ on }">
                 <v-text-field
                     v-model="appointment.date"
                     label="Select Date"
                     prepend-icon="event" readonly
                     v-on="on"
                     :rules="[v => !!v || 'Please select Date']">
                 </v-text-field>
            </template>
            <v-date-picker v-model="appointment.date" 
                           @input="menu = false"></v-date-picker>
    </v-menu>

Again the v-menu(date picker) works fine but the two v-selects still has no transition on select. PS the vuetify home page just says "Most components can have their transition altered through the transition prop." with only v-menu examples. Please Help :)

Upvotes: 0

Views: 1035

Answers (2)

Nicolas Leroy
Nicolas Leroy

Reputation: 11

To achieve this you have to use the menu-props props of the v-select

:menu-props="{ transition: 'fab-transition' }"

Hope it help.

Upvotes: 1

Lyle Phillips
Lyle Phillips

Reputation: 377

So just to close this one out. Rie just mentioned that v-select doesnt have the transition property so we cant apply transitions styles.

If anyone does have a work around pls share

Thanks Again Rie !!!!

Upvotes: 1

Related Questions