Question

我当前正在使用此打开一个对话框组件

父母

<v-btn color="#EF5350" dark small absolute top right fab 
 @click="showDialog">

   <v-icon>zoom_in</v-icon>  

</v-btn>

<UIDialog :dialog="dialog" @updateDialog="dialog = $event" />

<script>
  import UIDialog from '@/components/UI/UIDialog';
  export default {
    data() {
      return {
        dialog: false
      }
    }
    components: {
      UIDialog
    }, 
    methods: {
      showDialog() {
         this.dialog = true;
      }
    }
  }
</script>

由于我将对话框设置为true

，因此这将打开对话框

孩子

<v-dialog v-model="dialog" fullscreen scrollable>
  <v-card>
     This is a test
  </v-card>
</v-dialog>

<script>
 export default {
   props: {
     dialog: { type: Boolean, default: false }
   }, 
   watch: {
     dialog(val) {
       if (!val) this.$emit('updateDialog', false)
     }
   }
 }
</script>

我使用监视，因为vue对话框没有事件。我设法关闭了对话框，但仍然得到

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

Answer 1

我设法通过使用计算属性来获取和设置对话框来解决问题

孩子

<v-dialog v-model="dialog" fullscreen scrollable>
  <v-card>
     This is a test
  </v-card>
</v-dialog>

<script>
 export default {
   props: {
     dialog: { type: Boolean, default: false }
   }, 
   computed: {
     dialogState: {
        get() { 
          return this.dialog;
        }, 
        set(val) {
          this.$emit('updateDialog', false);
        }
     }
   }
 }
</script>

Answer 2

通过

在UIDialog上分解v模型

<v-dialog v-bind:value="dialog" v-on:input="emitOutput">

其中emitOutput输出一个“值”事件

emitOutput(value) { this.$emit('input', value) }

-这应该在控制台中处理prop突变的消息，并提供组件级别的可见性控制。发出“输入”事件时，您无需对父项上的自定义事件进行任何处理。

Answer 3

这对我有用：

父母

<app-my-dialog :dialog="doShowDialog" @close="doShowDialog = false"></app-my-dialog>

子组件（app-my-dialog）

<template>
  <v-dialog :value="showDialog" @click:outside="close()">
    <v-btn @click="close()">Close</v-btn>
  </v-dialog>
</template>
<script>
  export default {
    props: {
      dialog: {
        type: Boolean,
        default: false
     }
    }, 
    computed: {
      showDialog() {
        return this.dialog;
      }
    },
    methods: {
      close() {
        this.$emit('close')
      },
    }
  }
</script>

请注意，如果您使用<v-dialog :persistent="true" ...（这意味着对话框在其自身外部单击时不会关闭），则可以省略@click:outside="close()"

Answer 4

使用:value和@input而不是向v-model声明道具

发生道具突变错误是因为v-model已经有了:value及其突变器，从而触发了此错误。如果您将使用简单的:value并为@input方法close()声明它将起作用

Vuetify对话框将道具从子级更改为父级

4 个答案: