gpt4 book ai didi

javascript - Vuetify snackbar 条件

转载 作者:行者123 更新时间:2023-11-30 10:59:24 24 4
gpt4 key购买 nike

有人知道如何根据服务器的回答结果显示小吃吧。

例如,如果提交成功,则显示成功的绿色 snackbar 和成功消息,但如果我有错误,我需要显示红色错误 snackbar 和错误消息的绑定(bind)。

我想我需要通过一个方法来显示它。我想像这样在一个 snackbar 里做这件事。

<v-snackbar
:color = "color"
> {{text here}}
</v-snackbar

服务器帖子示例

http.post(apiAdresse, objectToPost)
.then(() => {
something to do here})
.catch(error => {
console.log(error)};)

编辑代码:

        <v-snackbar
:color="snackbar.color"
v-model="snackbar.show">
<v-icon class="snackIcon">{{snackbar.icon}}</v-icon>
{{ snackbar.message }}
<v-btn
dark
text
@click="snackbar = false"
>
Close
</v-btn>

</v-snackbar>

当我点击关闭按钮时

Error in v-on handler: "TypeError: Cannot use 'in' operator to search for 'show' in false"


最佳答案

我会这样做:

<template>
<!-- Set the color, v-model and message values in the data prop -->
<v-snackbar :color="snackbar.color" v-model="snackbar.show">
{{ snackbar.message }}
</v-snackbar>
</template>

<script>
export default {
data: () => ({
snackbar: {
show: false,
message: null,
color: null
}
}),
methods: {
submitAction() {
http.post(apiAdresse, objectToPost)
.then(() => {
this.snackbar = {
message: 'Your success message',
color: 'success',
show: true
}
})
.catch(error => {
this.snackbar = {
message: 'Your error message',
color: 'error',
show: true
}
})
}
}
}
</script>

您在 v-on 处理程序中收到 Error: "TypeError: Cannot use 'in' operator to search for 'show' in false" 因为您正在尝试将 snackbar 对象更新为 bool 值。你应该这样做:

<v-btn dark text @click="snackbar.show = false">
Close
</v-btn>

关于javascript - Vuetify snackbar 条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58532615/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com