Vuetify Snackbar在x秒后消失，如何防止这种情况发生

Question

不知怎么的，我的vuetify Snackbar在6秒钟后消失了，我试图阻止它，但我失败了。这就是我的vue组件看起来基本上是一个带有额外按钮的Snackbar。

<template>
<div>
<v-snackbar
:timeout="timeout"
:bottom="'bottom'"
:right="'right'"
:auto-height="true"
v-model="googleAnalyticsSnackbar"
>
{{ text }}
<v-btn flat color="pink">
<a href="#">test</a>
</v-btn>
<v-btn flat color="pink" @click.native="googleAnalyticsSnackbar = false">yes</v-btn>
<v-btn flat color="pink" @click.native="googleAnalyticsSnackbar = false">no</v-btn>
</v-snackbar>
</div>      
</template>
<script>
export default {
mounted() {
if(this.checkCookieStatus() == false || this.checkCookieStatus() == null) {
this.googleAnalyticsSnackbar = true;
}
},
data: () => ({
googleAnalyticsSnackbar: true,
timeout: 0,
text: 'foo'
}),
methods: {
acceptCookie() {
this.$cookie.set('cookie_accept_status', true, 1);
},
declineCookie() {
this.$cookie.set('cookie_accept_status', false, 1);
},
checkCookieStatus() {
return this.$cookie.get('cookie_accept_status');
}
}
};
</script>

我在我的主js文件中这样称呼它：

Vue.component('google-analytics-cookie', require('./components/GoogleAnalyticsCookieToastComponent.vue'));

并将其包含在我的html:中

<google-analytics-cookie></google-analytics-cookie>

但是Snackbar在大约6秒后就消失了，医生说0应该防止这种情况发生，但它不起作用。

Answer 1

问题在于底部和右侧属性绑定：

:bottom="'bottom'"
:right="'right'"

这些应该是true或false，而不是字符串。

它应该像文档描述的那样工作。示例：

new Vue({
el: '#app',
data () {
return {
snackbar: true,
timeout: 0,
bottom: true,
right: true
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.js" integrity="sha256-MDwft2SRPd5GCJGWRIbkS5l7Gcr3S3vJr7MKpe1Z3+Q=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.css" integrity="sha256-h8aOnZm3FeYz5m4z7eI3xc0uJX3l/mF+0i2643O7ieM=" crossorigin="anonymous" />
<div id="app">
<v-app>
<v-snackbar :timeout="timeout" v-model="snackbar" :bottom="bottom" :right="right" color="indigo">Hi There <v-btn @click="snackbar=false" dark>Close</v-btn></v-snackbar>
</v-app>
</div>

Answer 2

要防止自动取消snackbar，请将超时设置为-1。当我将超时设置为0时，控制台警告它不推荐使用，并建议将其设置为-1

Answer 3

new Vue({
el: '#app',
data () {
return {
snackbar: true,
timeout: 0,
bottom: true,
right: true
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.js" integrity="sha256-MDwft2SRPd5GCJGWRIbkS5l7Gcr3S3vJr7MKpe1Z3+Q=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.12/vuetify.min.css" integrity="sha256-h8aOnZm3FeYz5m4z7eI3xc0uJX3l/mF+0i2643O7ieM=" crossorigin="anonymous" />
<div id="app">
<v-app>
<v-snackbar :timeout="timeout" v-model="snackbar" :bottom="bottom" :right="right" color="indigo">Hi There <v-btn @click="snackbar=false" dark>Close</v-btn></v-snackbar>
</v-app>
</div>