我正在try 创建一个模态,但只有在关闭它时才会出现此错误:

[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\配电盘为单室式.vue
       <VNavigationDrawer>
         <PanelDrawer> at resources\assets\vue\PanelDrawer.vue
           <VApp>
             <PanelRoot> at resources\assets\vue\PanelRoot.vue
               <VApp>
                 <Root>

配电盘为单室式.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>

推荐答案

这是因为你的v-model中有props value.

不要这样做,因为当v-model发生变化时,这会使prop(value)发生变化(您应该只使用v-model afaik更改data个值,但在这种情况下,您甚至不需要额外的data变量).

因为vuejs v2.3.0, it is suggested to emit value to the parent,所以父组件会对其进行更改,然后将其传递给子组件.


So all you have to do is:

v-dialog

拆下v-model,换上:value="value" @input="$emit('input')"

以及你的功能:

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

panel-desconectar-modal个组件中使用v-model="showDesconectar".


这将有效because:

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

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

这是我在answersimilar question中提供的working example pen.

Vue.js相关问答推荐

Vue CDN的html工作,但v—如果不工作

如何在与父集合相同的读取中取回子集合(或重构数据?)

vuejs:在确认提示之前更改 HTML

在 v-for 中定义变量有什么问题吗?

Rails Webpacker 还是 Vue-CLI?

Webpack 编译错误:TypeError: __WEBPACK_IMPORTED_MODULE_1__ … is not a function

在 Vuex Store 模块中使用 Vue.js 插件

如何使用带有自定义标签和类的`transition-group`

Vue watch 意外调用了两次

查看 cli3 启用 CORS

Django Rest 框架、CSRF 和 Vue.js

如何将参数传递给使用 ...mapActions(...) 映射的函数?

v-for 中的 VueJS 插槽

使用 Vue.js 的用户可切换自定义主题

VS代码中的红点是什么意思

Vue 3:模块 '"../../node_modules/vue/dist/vue"' 提示

如何将数据属性设置为从 Vuex getter 返回的值

Vue Chart.js - 条形图上的简单点/线

如何在 vue.js 2 上循环对象观察者?

使用 CloudFront 部署在 S3 上的 VueJS 应用程序的指定的密钥不存在