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）（你应该只用[{1}} afai更改data值，但是例如，您甚至不需要额外的v-model变量。

由于vuejs v2.3.0, it is suggested to emit value to the parent，因此父级更改它，然后将其传递给子组件。

<小时/> 所以你要做的就是：

data组件

中的

删除v-dialog并将其替换为v-model

你的功能：

:value="value" @input="$emit('input')"

在closeDialog() { this.$emit('input'); }组件中使用panel-desconectar-modal。

这将有效because：

v-model="showDesconectar"

以下是我在working example pen至answer中提供的similar question。

Answer 2

您不应该改变子组件中的道具。您只能改变对象而不是基元。因此，您可以使用数据选项或计算属性：

childValue

现在，您可以更改closeDialog() { this.childValue = false; },：

childValue

确保在子组件内的任何位置使用value而不是Fabric.framework/run道具。

Answer 3

这真的是问自己的时刻 ＆＃34;我真的需要一个道具吗？我可以用数据做这个吗？我在这里因为我错误地在Vue组件中放了一些状态吗？＆＃34;

如果您是网页和组件的作者，并且该组件只在页面上显示一次，则没有充分理由使用道具。如果您需要道具，因为对于数组中的所有行重复组件，使prop只是数组索引，因此组件可以直接修改存储中的源数组。 Vue组件不应包含状态，尤其是需要共享的状态，并且不喜欢彼此紧密绑定。亲子关系产生于他们放置在DOM树中的机会，（孩子出现在父母的标记内）。这就像在夜总会的机会。孩子可能与父母没有任何关系。源数据的层次结构应与商店结构中的标记无关。在可能的情况下，您的Vue组件应该与商店保持密切的双向关系，并且彼此之间没有太多关联： - ）

Answer 4

在relevant Vue doc中没有默认值的示例，因此可以在其他位置找到这些答案。我需要一个解决方案来创建一个具有默认值的组件，但是当输入失去焦点时，输入总是会跳回到之前的状态，否则会出现“避免直接更改道具”错误。创建可变属性并在created事件中设置其值可以为我解决此问题：

data()
{
    return {
        text: null
    };
},

props: {
    properties: Object,
    value: String
},

created()
{
    this.text = this.value;
}

VueJS错误避免直接改变道具

4 个答案: