VueJS错误避免直接更改道具

Question

我正在尝试创建一个模态，但是只有在关闭它时才出现此错误：

[Vue warn]: 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: "value"

found in

---> <PanelDesconectarModal> at resources\assets\vue\PanelDesconectarModal.vue
       <VNavigationDrawer>
         <PanelDrawer> at resources\assets\vue\PanelDrawer.vue
           <VApp>
             <PanelRoot> at resources\assets\vue\PanelRoot.vue
               <VApp>
                 <Root>

PanelDesconectarModal.vue

<template>
    <v-dialog v-model="value" max-width="350">
        <v-card :dark="($theme === 'dark')">
            <v-card-title class="headline">Desconectar</v-card-title>
            <v-divider></v-divider>
            <v-card-text>Você tem certeza que deseja desconectar-se?</v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn flat @click.native="closeDialog">Cancelar</v-btn>
                <v-btn :color="$color" flat="flat" @click.native="desconectar">Desconectar</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        name: 'panel-desconectar-modal',
        props: ['value'],
        methods: {
            closeDialog() {
                this.value = false;
            },
            desconectar() {
                this.closeDialog();

                window.location = this.$route + '/panel/desconectar';
            }
        }
    }
</script>

使用ProgressDesconectarModal.vue，showDesconectar是一个数据变量

<panel-desconectar-modal :value="showDesconectar"></panel-desconectar-modal>

Answer 1

这是因为您的道具value中有道具v-model。

请勿这样做，因为这将value在v-model更改时使prop（）突变（您只应data使用v-modelafaik 更改值，但在这种情况下，甚至不需要其他data变量）。

从vuejs v2.3.0开始，建议将emit值赋值为parent，以便父级对其进行更改，然后将其传递给子组件。

因此，您要做的就是：

在v-dialog组件中

删除v-model并替换为:value="value" @input="$emit('input')"

而你的功能：

closeDialog() {
    this.$emit('input');
}

在panel-desconectar-modal组件中使用v-model="showDesconectar"。

这将起作用，因为：

<input v-model="something"> is syntactic sugar for:

<input   
    v-bind:value="something"
    v-on:input="something = $event.target.value">

这里是工作示例的笔，我在提供答案，以类似的问题。