CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
auchi
auchi

Reputation: 13

How to use Vuetify Component Slot Function

I would like to know what the title says. I'm trying to use the v-alert dismissible component and want to add some functionality when the user click the close button. Reading the docs there is a toggle function in the close slot that "Toggles the alert’s active state. Available in the close slot and used as the click action in dismissible."

https://vuetifyjs.com/en/api/v-alert/#functions

https://vuetifyjs.com/en/api/v-alert/#slots-close

Find below what I've tried without success:

<template>
  <div id="app">
    <v-app>
      <v-alert dismissible v-model="message">
        {{ message }}
        <template v-slot:close="{ toggle }">
          <v-btn color="primary" dark @click="myFunction"> Dismiss </v-btn>
        </template>
      </v-alert>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    message: "The message",
  }),
  methods: {
    myFunction() {
      console.log("do something before dismiss");
    },
  },
};
</script>

Upvotes: 1

Views: 4395

Answers (1)

Vinibr
Vinibr

Reputation: 834

This slot return a function called toggle. One possible solution is to pass this funcion to your custom function, do wherever you want and then call the toggle function.

https://codepen.io/vinisalves/pen/poRrjOY?editors=1010

<div id="app">
    <v-app>
      <v-alert dismissible v-model="myAlertModel">
        {{ message }}
        <template v-slot:close="{ toggle }">
          <v-btn  color="primary" dark @click="myFunction(toggle)"> Dismiss </v-btn>
        </template>
      </v-alert>
    </v-app>
  </div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
   data: () => ({
    message: "The message",
     myAlertModel: true,
  }),
  methods: {
    myFunction(dismissFn) {
      console.log("do something before dismiss");
      dismissFn();
      
    },
  
  },
})

Other problem is, the v-model expect a boolean value not string.

Upvotes: 2

Related Questions