I'm facing a little issue using Vuejs 2.3 and Element UI 1.3.1 I would like to be able to close the dialog by clicking on the X but the event does not seem to be caught.

<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,
      };
    },
    puted : {
        showDialog() {
        return this.cond1 && this.cond2 && this.cond3
        }
    },
    methods: {
        closeDialog() {
          alert('close event')}
    }
  };

/

It is working if I click on the button but not on the cross. Could you explain to me why and what should I do ?

I'm facing a little issue using Vuejs 2.3 and Element UI 1.3.1 I would like to be able to close the dialog by clicking on the X but the event does not seem to be caught.

<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,
      };
    },
    puted : {
        showDialog() {
        return this.cond1 && this.cond2 && this.cond3
        }
    },
    methods: {
        closeDialog() {
          alert('close event')}
    }
  };

https://jsfiddle/zuL0uqy2/

It is working if I click on the button but not on the cross. Could you explain to me why and what should I do ?

• javascript
• vuejs2

1 Answer 1

According to the source, all that happens when you click the close X in element ui is that it emits two events, update:visible and visible-change. You need to listen to one of these events in order to update your data appropriately to close the dialog. You could add a method like this

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

and change your template accordingly.

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

Example.

It looks like their intention is that you take advantage of sync being added back into Vue and use a visible attribute.