Vue.js - 元素 UI - 嵌套对话框不会打开 - v-if v-show

debugcn 发表于 Dev

狮子座可可

我正在使用vue.js 2.3和element-ui

情况

我只是在玩这个el-dialog组件。我正在测试 3 种不同的选项，但只有三者中的一种有效

<popup v-if="showDialog" :show-dialog.sync="showDialog"></popup> 好的

<popup v-show="showDialog" :show-dialog.sync="showDialog"></popup> 部分正常

<popup :show-dialog.sync="showDialog"></popup> 不好

代码

<div id="app">
  <button @click="showDialog = true">Show Component PopUp</button>
  <popup v-if="showDialog" :show-dialog.sync="showDialog"></popup>
</div>



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

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

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

  }
});

小提琴

https://jsfiddle.net/dbg2e9z2/好的

https://jsfiddle.net/gtxeaq41/部分OK

https://jsfiddle.net/dwr5dmfg/不行

问题

使用第二个选项，弹出窗口打开但不显示内容。使用第三个选项，根本不显示弹出窗口。

问题

为什么会有这种行为？

我应该怎么做才能el-dialog正常工作同时避免v-if（我想将数据保留在缓存中，因为对话框包含大量数据）

狮子座可可

基于@Max 回答https://jsfiddle.net/64Ltkne7/

<div id="app">
  <button @click="showDialog = true">Show Component PopUp</button>
  <popup :show-dialog.sync="showDialog"></popup>
</div>

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

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 )
   }
  },
   mounted:function (){
   alert('mounted')
  },
});

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

  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。