Vuejs - 요소 UI - 십자 기호를 사용하여 대화 상자를 닫을 수 없습니다.

Vuejs - 요소 UI - 십자 기호를 사용하여 대화 상자를 닫을 수 없습니다.

는 지금 이 문제를 Vuejs 2.3 ★★★★★★★★★★★★★★★★★」Element UI 1.3.1 대화 을 하십시오.X을 사용법

<div id="app">
  <el-dialog title="Shipping address" v-model="showDialog"
    @close="closeDialog()">
    <button @click='cond1 = false'>Close</button>
  </el-dialog>
</div>

var Main = {
    data() {
      return {
        cond1: true,
        cond2: true,
        cond3: true,
      };
    },
    computed : {
        showDialog() {
        return this.cond1 && this.cond2 && this.cond3
        }
    },
    methods: {
        closeDialog() {
          alert('close event')}
    }
  };

https://jsfiddle.net/zuL0uqy2/

버튼을 .button왜 해야 하는지 ?

소스에 따르면 요소 ui에서 닫기 X를 클릭하면 두 개의 이벤트가 발생합니다.update:visible ★★★★★★★★★★★★★★★★★」visible-change대화 상자를 닫으려면 데이터를 적절히 업데이트하려면 이러한 이벤트 중 하나를 들어야 합니다. 수법이 있어요.

onVisible(isVisible){
    if (isVisible)
        return
    this.cond1 = false
}

그에 따라 템플릿을 변경합니다.

<el-dialog title="Shipping address" v-model="showDialog"
    @close="closeDialog()" @visible-change="onVisible" >

예.

동기화가 Vue에 다시 추가되는 이점을 활용하여 Vue를 사용하는 것 같습니다.visible여하하다

언급URL : https://stackoverflow.com/questions/43895193/vuejs-element-ui-cannot-close-dialog-with-the-cross