Vuetify 对话框设置从子项到父项的道具突变

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

这对我有用：

父母

<app-my-dialog :dialog="doShowDialog" @close="doShowDialog = false"></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 3

在 UIDialog 上分解你的 v-model，以支持

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

其中emitOutput输出"值"事件

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

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

Answer 4

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

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