Vuejs2 Vuetify snackbar超时时更新父状态

目前我有一个

父组件

和一个

子组件

。在

Parent

组件中，我在成功的API调用后将

snackbar

状态设置为

true

，以便显示snackbar。当我点击snackbar中的

close按钮时，父节点的状态将更新，snackbar将消失。但是，当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>

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

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


从“./components/Snackbar”导入Snackbar；
导出默认值{
姓名：“AddFriend”，
组件：{Snackbar}，
方法：{
更新nackbar（e）{
这个.snackbar=e；
},
添加（）{
const username=“test”；
axios
.post（“/api/friend/add”，
{
用户名：username
})
。然后（响应=>{
if（response.data.success）{
this.snackbar=true；
this.text='Request successfully send！'；
}否则{
this.snackbar=true；
this.text=response.data.error；
}
})
.catch（错误=>{
log（'出错：'+err）；
this.snackbar=true；
this.text='test'；
})
}
},
数据（）{
返回{
错误：null，
有效：假，
文本：空，
snackbar:false，
底部：“底部”，
}
}
}

这是我的孩子（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>

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

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


{{text}}
接近
导出默认值{
名称：“Snackbar”，
道具：{
snackbar:Boolean，
y:弦，
x:null，
模式：字符串，
文本：字符串
},
方法：{
关闭弹簧撑杆（弹簧撑杆）{
此.$emit（'update-snackbar'，snackbar'）；
}
},
数据（）{
返回{}
}
}

如果有人知道怎么做，请让我知道。此外，如果需要一个代码沙盒，我会创建一个。提前谢谢
 我设法在超时时更新父状态。为此，我补充说：

@input="closeSnackbar"

到我的v形小吃吧。当超时发生时，它现在触发closeSnackbar函数，该函数更新父组件。对于每个有相同问题的人，这里是我的完整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>

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

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


{{text}}
导出默认值{
名称：“Snackbar”，
道具：{
snackbar:Boolean，
文本：字符串
},
方法：{
关闭弹簧撑杆（弹簧撑杆）{
此.$emit（'update-snackbar'，snackbar'）；
}
},
}