CODEWITHSUNDEEP
vue.jsvuetify.js
Richard
Richard

Reputation: 1474

Vuetify Slide Groups @click="toggle"

From the last example on this page: https://vuetifyjs.com/en/components/slide-groups

I'm trying to understand how the following actually works:

<v-slide-item 
  v-for="n in 15" 
  :key="n" 
  v-slot:default="{ active, toggle }">

  <v-card 
    :color="active ? 'primary' : 'grey lighten-1'"
    class="ma-4" 
    height="200" 
    width="100" 
    @click="toggle"
  >

The v-card component has a @click=toggle on it, which somehow affects its parent component with v-slot? Is toggle a special keyword here?

In other words, does @click="toggle" make "active" true or false?

Upvotes: 2

Views: 6618

Answers (1)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

Is toggle a special keyword here?

Yes, it's a native function as it is inside of your v-slot:default="{ active, toggle }.

In other words, does @click="toggle" make "active" true or false?

Yes, when you click to <v-card> this toggle function will make the active to true/false by with the help of model.

The following line declares a scoped slot default variable and it is provided a scope object, which contains active, toggle

v-slot:default="{ active, toggle }"

We can also create our custom click as well for the v-card and inside of that click we can change model value. Like below

<v-card
    :color="active ? 'primary' : 'grey lighten-1'"
    class="ma-4"
    height="100"
    width="100"
    @click="onCardClick(n)"
>
//Custom click event
methods:{
    onCardClick(n){
      this.model = n - 1;
    }
}

I have created codepen demo, this will more guide you to understand the logic of toggle and model.

Upvotes: 10

Related Questions