Vuetify 小吃吧超时时更新父状态答案

【问题标题】：Update parent state when Vuetify snackbar timeoutsVuetify 小吃吧超时时更新父状态
【发布时间】：2019-09-01 04:58:07
【问题描述】：

目前我有一个Parent 和一个Child 组件。在Parent 组件中，我在成功调用API 后将snackbar 状态设置为true，这样它就会显示snackbar。当我单击小吃栏中的close button 时，父级的状态会更新，并且小吃栏会消失。但是，当小吃店超时时，我收到以下错误：

避免直接改变prop，因为值会被覆盖每当父组件重新渲染时。相反，使用数据或基于道具值的计算属性。道具被变异： “小吃店”

当快餐栏超时时如何更新父状态？有没有干净的方法来做到这一点？

这是我的父组件：

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

这是我的 Child (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，我将创建一个。提前致谢！

【问题讨论】：

标签： vuejs2 vuetify.js

【解决方案1】：

我设法在超时时更新父状态。我通过添加：

@input="closeSnackbar"

到我的 v-snackbar。当超时发生时，它现在会触发 closeSnackbar 函数来更新我的父组件。对于所有有同样问题的人，这里是我完整的小吃栏组件：

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

【讨论】：