How to close snackbar on click of close buttton?-CodePudding

I am trying to close snackbar on click on close button. Initially, on page load snackbar should popup by default and it should remain until I close it manually. So, I set timeout to zero.But my snackbar is not getting closed on click of close button. Require you input.

HTML templete

<div id="app">
  <v-app id="inspire">
    <v-card>
     <v-snackbar
        
        :timeout="0"
        :value="true"
        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>

JS -

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
     
      snackbar: true,
     
    }
  },
})

https://codepen.io/KiranGire/pen/eYjBpOP?editors=101

CodePudding user response：

you can use the next code:

<template>
<div id="app">
<v-app id="inspire">
  <v-card>
    <v-snackbar
      
      :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>

CodePudding user response：

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.

CodePudding user response：

You are missing the "this" keyword.

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

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