Question

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

避免直接更改道具，因为该值将被覆盖每当父组件重新渲染时。而是使用数据或根据属性值计算属性。道具被突变： “小吃店”

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

这是我的父级组件：

<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（快餐）组件：

<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型小吃店。发生超时时，它现在触发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>

Vuetify快餐栏超时时更新父状态

1 个答案: