하위에서 상위로의 Vuetify 대화 상자 세트 프로펠러 돌연변이

하위에서 상위로의 Vuetify 대화 상자 세트 프로펠러 돌연변이

현재 이 옵션을 사용하여 대화 상자 구성 요소를 여는 중

부모

<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

계산된 속성을 사용하여 대화 상자를 가져오고 설정함으로써 간신히 문제를 해결했다.

아이

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

UIDalog에서 v-model을 분해하여

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

, whereemitOutput'값' 이벤트를 출력하다

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

-- 콘솔에서 프로펠러 돌연변이의 메시지를 처리하고 구성요소 수준의 가시성 제어도 제공해야 한다.당신은 '입력' 이벤트를 발생시킬 때 부모님의 맞춤 이벤트에 대해 어떤 취급도 할 필요가 없을 것이다.

이 일은 내게 효과가 있었다.

부모

<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()"

사용하다:value그리고@input에게 지지선언을 하는 대신에.v-model

프로펠러 돌연변이 오류 발생 원인은v-model이미 가지고 있다:value이 오류를 유발하는 돌연변이도 있고만약 당신이 간단한 것을 사용한다면:value을 선언하다.@input방법close()그건 작동할 것이다.

참조URL: https://stackoverflow.com/questions/56625851/vuetify-dialog-set-prop-mutation-from-child-to-parent