올바른 사용: vuetify 대화 상자를 사용한 외부

올바른 사용: vuetify 대화 상자를 사용한 외부

필요한 경우 달력 선택기를 팝업하는 데 사용하는 v-dialog가 있습니다.이를 표시하기 위해 v-modle로 값을 바인딩합니다.click:outside 이벤트를 사용하여 외부에서 클릭하면 닫히도록 되어 있는 기능을 트리거합니다(외부를 클릭하면 대화상자가 해제되지만 값은 'true'로 유지되므로 두 번 이상 표시할 수 없습니다).내가 뭔가 잘못하고 있는 게 틀림없어.

대화창은 다음과 같습니다.

<template>
  <v-dialog
    v-model="value"
    @click:outside="closeDialog"
  >
    <v-date-picker
      v-model="date"
    />
    <v-divider/>
    <div>fermer</div>
  </v-dialog>
</template>

<script>
  export default {
    name: 'DatePickerDialog',
    props: ['value'],
    data() {
      return {
        colors,
        date: null,
      }
    },
    methods: {
      closeDialog() {
        this.value = false;
      }
    }
  }
</script>

또, 다음과 같이 간단하게 호출할 수 있습니다.

<template>
  <div>
    <v-btn @click="inflateDatePicker">inflate date picker</v-btn>
    <date-picker-dialog v-model="showDatePicker"/>
  </div>
</template>

<script>
import DatePickerDialog from '../../../../views/components/DatePickerDialog';

export default{
  name: "SimpleTest",
  components: {
    DatePickerDialog
  },
  data() {
    return {
      showDatePicker: false,
    };
  },
  methods:{
    inflateDatePicker() {
      this.showDatePicker = true;
    },
  },
}
</script>

그래서 문제없이 부풀릴 수 있어요.closeDialog()에는 들어갈 수 없지만 (디버깅과 로그로 확인)그럼 무슨 일이 있었길래 함수에 들어갈 수 없는 거죠?일반적인 @click 이벤트와 다르게 사용할 필요가 있는지 여부는 설명서에 명시되어 있지 않습니다.

문제는 내 closeDialog 함수에 있었다.this.value = false가 상위 구성 요소에 값 변경을 알리지 않았습니다.그래서 정상적으로 동작하기 위해서, 이것을 다음과 같이 변경할 필요가 있었습니다.

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

이것만 있으면 완벽하게 잘 될 거야.

언급URL : https://stackoverflow.com/questions/63531848/properly-using-clickoutside-with-vuetify-dialog