vuejs2 - 当 Vuetify snackbar 超时时更新父状态

Question

目前我有一个 Parent 和一个 Child 组件。在成功调用 API 后，我在 Parent 组件中将 snackbar 状态设置为 true，以便显示 snackbar 。当我单击 snackbar 中的关闭按钮时，父级的状态会更新并且 snackbar 会消失。但是，当 snackbar 超时时，我收到以下错误:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "snackbar"

当 snackbar 超时时，如何更新父状态？有没有一种干净的方法可以做到这一点？

这是我的父组件:

<Snackbar :snackbar="snackbar" :y="bottom" :text="text" @update-snackbar="updateSnackbar"></Snackbar>

<script>
    import Snackbar from "../components/Snackbar";

    export default {
        name: "AddFriend",
        components: {Snackbar},
        methods: {
            updateSnackbar(e) {
                this.snackbar = e;
            },
            add() {
                const username = "test";
                axios
                    .post('/api/friend/add',
                        {
                            username: username
                        })
                    .then(response => {
                        if (response.data.success) {
                            this.snackbar = true;
                            this.text = 'Request successfully send!';
                        } else {
                            this.snackbar = true;
                            this.text = response.data.error;
                        }
                    })
                    .catch(err => {
                        console.log('Something went wrong: ' + err);
                        this.snackbar = true;
                        this.text = 'test';
                    })
            }
        },
        data() {
            return {
                error: null,
                valid: false,
                text: null,
                snackbar: false,
                bottom: 'bottom',
            }
        }
    }
</script>

这是我的子(snackbar)组件:

<template>
    <v-snackbar
            v-model="snackbar"
            :bottom="y === 'bottom'"
            :timeout="1500"
            :vertical="mode === 'vertical'"
    >
        {{ text }}
        <v-btn
                color="red"
                flat
                @click="closeSnackbar(false)"
        >
            Close
        </v-btn>
    </v-snackbar>
</template>

<script>
    export default {
        name: "Snackbar",
        props: {
            snackbar: Boolean,
            y: String,
            x: null,
            mode: String,
            text: String
        },
        methods: {
            closeSnackbar(snackbar) {
                this.$emit('update-snackbar', snackbar);
            }
        },
        data() {
            return {}
        }
    }
</script>

如果有人知道如何执行此操作，请告诉我。另外，如果需要 CodeSandBox，我将创建一个。提前致谢!

Answer 1

我设法在超时时更新父状态。我通过添加以下内容来做到这一点:

@input="closeSnackbar"

到我的 v-snackbar。当超时发生时，它现在会触发 closeSnackbar 函数来更新我的父组件。对于遇到同样问题的每个人，这里是我的完整 snackbar 组件:

<template>
    <v-snackbar
            :value="snackbar"
            @input="closeSnackbar"
            bottom
            :timeout="1500"
    >
        {{ text }}
    </v-snackbar>
</template>

<script>
    export default {
        name: "Snackbar",
        props: {
            snackbar: Boolean,
            text: String
        },
        methods: {
            closeSnackbar(snackbar) {
                this.$emit('update-snackbar', snackbar);
            }
        },
    }
</script>