Javascript Vuetify snackbar条件

有人知道如何根据服务器的应答结果显示snackbar吗

例如，如果submit是ok，则显示带有成功消息的成功绿色快餐条，但如果我有错误，则需要显示带有错误消息绑定的红色错误快餐条

我想我需要通过一个方法来显示它。 我只想在这样一个小吃店里做这个

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

编辑代码：

        <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>

我会这样做：

<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处理程序中有这样一条消息：“TypeError:无法使用'in'运算符搜索'show'in false”我只使用您给我的代码，在这之前还可以，我只向快餐店添加一个btn，我编辑代码以查看我的答案是否更新

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-btn dark text @click="snackbar.show = false">
   Close
</v-btn>