[Vuejs]-How to close snackbar on click of close buttton?

by

1👍

✅

First thing first. What kind of assignment operator looks like this-

@click="snackbar: false"

If you want to assign a value to any variable, you must use = operator. So replace the above code with this-

@click="snackbar = false"

Second thing, if you will use :value="true" then obviously the snackbar will be displayed forever. So, bind the value prop to the variable which you are using to toggle the snackbar instead of a hard-coded boolean. For example-

:value="snackbar"

Do these two fixes, and it will work.

0👍

you can use the next code:

<template>
<div id="app">
<v-app id="inspire">
  <v-card>
    <v-snackbar
      class="regiSnack"
      :timeout="0"
      :value="snackbar"
      absolute
      :multi-line="multiLine"
      top
      color="deep-purple accent-4"
      elevation="50"
    >
      This is Snackbar
      <template>
        <v-btn text @click="snackbar = false"> Close </v-btn>
      </template>
    </v-snackbar>
   </v-card>
  </v-app>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    snackbar: true,
   }
  },
 }
</script>

-1👍

You are missing the "this" keyword.

<v-btn text @click="snackbar: false"> Close

<v-btn text @click="this.snackbar: false"> Close

Leave a comment