点击关闭按钮无法关闭Vuetify Snackbar？求解决方案

你遇到的问题主要有三个错误点，修正后就能正常实现关闭功能：

• Snackbar的value绑定错误
  原代码里把:value硬设为true，没有关联到data里的snackbar变量，导致修改变量无法控制弹窗状态。必须把:value绑定到响应式的snackbar变量上。

• 关闭按钮的点击事件语法错误
  @click="snackbar: false"是错误写法，Vue中修改数据要用赋值语句，应该写成@click="snackbar = false"。

• 未使用正确的插槽放置操作按钮
  Vuetify的Snackbar要求操作按钮放在actions插槽中，否则按钮的功能关联会出问题，需要用<template #actions>（或<v-slot:actions>）包裹关闭按钮。

另外，原代码里用到了multiLine但没在data里定义，会触发控制台警告，建议补充这个变量。

修正后的完整代码 #

HTML模板

<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 #actions>
             <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,
      multiLine: true
    }
  },
})

修正后，页面加载时Snackbar会自动弹出，点击Close按钮即可正常关闭，满足你设置timeout=0保持显示直到手动关闭的需求。

内容的提问来源于stack exchange，提问作者Jazz