title: How to use Vuetify Component Slot Function
body: <p>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 <em>toggle</em> function in the <em>close</em> slot that <em>&quot;Toggles the alert’s active state. Available in the close slot and used as the click action in <strong>dismissible</strong>.&quot;</em></p>
  <p><a href="https://vuetifyjs.com/en/api/v-alert/#functions" rel="nofollow noreferrer">https://vuetifyjs.com/en/api/v-alert/#functions</a></p>
  <p><a href="https://vuetifyjs.com/en/api/v-alert/#slots-close" rel="nofollow noreferrer">https://vuetifyjs.com/en/api/v-alert/#slots-close</a></p>
  <p>Find below what I've tried without success:</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;v-app&gt;
        &lt;v-alert dismissible v-model=&quot;message&quot;&gt;
          {{ message }}
          &lt;template v-slot:close=&quot;{ toggle }&quot;&gt;
            &lt;v-btn color=&quot;primary&quot; dark @click=&quot;myFunction&quot;&gt; Dismiss &lt;/v-btn&gt;
          &lt;/template&gt;
        &lt;/v-alert&gt;
      &lt;/v-app&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;App&quot;,
    data: () =&gt; ({
      message: &quot;The message&quot;,
    }),
    methods: {
      myFunction() {
        console.log(&quot;do something before dismiss&quot;);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>