Vue.js — Element UI — вложенный диалог не открывается из выпадающего меню

Я новичок в Vue.js и ElementUI, и у меня возникают проблемы с открытием диалогового окна из выпадающего меню.

Я использую Vue 2.5.2 и ElementUI: 2.3.4.

Я попытался следовать решению из Vue .js — Element UI — вложенный диалог не открывается — v-if v-show, но не повезло.

Проблема:

Диалоговое окно не отображается после нажатия элемента раскрывающегося меню.

Спасибо!

console.clear()

let popupData;

Vue.component('popup', {
	name: "popup",
  template: '#popup',
  props : ['showDialog'],
  data(){
  	return {
	  	show: this.showDialog,
      data: "Hello"
  	}
  },
  watch: {
  	showDialog: function(n,o){
			this.show = this.showDialog;    
    }
  },
  methods: {
   updateShowDialog(isVisible) {
       if (isVisible) return false;
       this.$emit('update:showDialog', false )
   }
  },
   created:function (){
  },
});

var vm = new Vue({
  el: '#app',
  data: {
  	showDialog: false,
  },
  methods: {

  }
});
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<div id="app">
   <el-dropdown>
    <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 @click.native="showDialog = true">Show Component PopUp
        <popup :show-dialog.sync="showDialog"></popup>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>

<template id="popup">
    <el-dialog :visible.sync="show" @visible-change="updateShowDialog" >{{data}}</el-dialog>
</template>


javascript vue.js element-ui
person User_362529    schedule 22.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Из документов element.io элемент el-dropdown не имеет события @click, вы должны использовать событие команды в раскрывающемся списке: 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>

JS-часть:

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;
      }
    }
  }
});

См. рабочую скрипку: https://jsfiddle.net/rafaph/pefwgL7y/2/

person Raphael    schedule 23.04.2018