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

Posted 2023-02-23

【中文标题】Vuetify 小吃吧超时时更新父状态

【英文标题】：Update parent state when Vuetify snackbar timeouts

【发布时间】：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，我将创建一个。提前致谢！

【参考方案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>