[Vuejs]-Vue.js – Element UI – Nested dialog won't open from dropdown menu

by

0👍

✅

From de element.io docs, the el-dropdown-item do not have a @click event, you must use command-event in dropdown: http://element.eleme.io/#/en-US/component/dropdown#command-event

<div id="app">
  <el-dropdown @command="onCommandDropdown">
    <span class="el-dropdown-link">
      Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="show-popup">
        Show Component PopUp
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  <popup :show-dialog.sync="showDialog"></popup>
</div>

<script type="x-template" id="popup">
  <el-dialog title="Modal Title" :visible="showDialog" @close="onClose">
    <span>{{ data }}</span>
  </el-dialog>
</script>

The js part:

Vue.component('popup', {
  template: '#popup',
  props: ['showDialog'],
  data() {
    return {
      show: this.showDialog,
      data: "Hello modal!"
    }
  },
  watch: {
    showDialog(newValue) {
      this.show = newValue;
    }
  },
  methods: {
    onClose() {
      this.show = false;
      this.$emit('update:showDialog', false);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    showDialog: false
  },
  methods: {
    onCommandDropdown(command) {
      if (command === 'show-popup') {
        this.showDialog = true;
      }
    }
  }
});

See working fiddle: https://jsfiddle.net/rafaph/pefwgL7y/2/

Leave a comment