Диалоговое окно 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-модель на UIDialog, в пользу

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

, где emitOutput выводит событие 'value'

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

- Это должно обрабатывать сообщение о мутации в консоли, а также обеспечивать контроль видимости на уровне компонентов.Вам не нужно будет обрабатывать пользовательские события родительского события при отправке события input.

Answer 2

Мне удалось решить мою проблему, используя вычисленное свойство, чтобы получить и установить диалоговое окно

Дочерний

<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>