Vue.js - 元素 UI - 嵌套对话框不会打开 - v-if v-show [英] Vue.js - Element UI - Nested dialog won't open - v-if v-show

问题描述

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

情况

我只是在玩el-dialog 组件.我正在测试 3 种不同的选项，而这三个选项中只有一个可以使用

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

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

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

代码

<button @click="showDialog = true">显示组件弹出窗口</button><popup v-if="showDialog" :show-dialog.sync="showDialog"></popup>
<模板 id="popup"><el-dialog :visible.sync="show" @visible-change="updateShowDialog" >{{data}}</el-dialog></模板>Vue.component('弹出窗口', {名称:弹出"，模板:'#popup'，道具:['showDialog']，数据(){返回 {显示:this.showDialog，数据:你好"}},方法: {updateShowDialog(isVisible) {如果(isVisible)返回false；this.$emit('update:showDialog', false )}},创建:函数(){},});var vm = new Vue({el: '#app',数据: {显示对话框:假，},方法: {}});

小提琴

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

https://jsfiddle.net/gtxeaq41/ 部分确定

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

问题

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

问题

为什么会有这种行为?

我应该怎么做才能让 el-dialog 正常工作，同时避免 v-if(我想将数据保存在缓存中，因为对话框包含很多数据)

解决方案

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

<button @click="showDialog = true">显示组件弹出窗口</button><popup :show-dialog.sync="showDialog"></popup>
<模板 id="popup"><el-dialog :visible.sync="show" @visible-change="updateShowDialog" >{{data}}</el-dialog></模板>控制台清除()让 popupData;Vue.component('弹出窗口', {名称:弹出"，模板:'#popup'，道具:['showDialog']，数据(){返回 {显示:this.showDialog，数据:你好"}},手表: {显示对话框:函数(n，o){this.show = this.showDialog;}},方法: {updateShowDialog(isVisible) {如果(isVisible)返回false；this.$emit('update:showDialog', false )}},安装:功能(){警报('安装')},});var vm = new Vue({el: '#app',数据: {显示对话框:假，},方法: {}});

I'm using vue.js 2.3 and element-ui

Situation

I'm just playing around with the el-dialog component. I'm testing 3 differents options and only one out of the three is working

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

<popup v-show="showDialog" :show-dialog.sync="showDialog"></popup> PARTIAL OK

<popup :show-dialog.sync="showDialog"></popup> NOT OK

Code

<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: {

  }
});

Fiddles

https://jsfiddle.net/dbg2e9z2/ OK

https://jsfiddle.net/gtxeaq41/ PARTIAL OK

https://jsfiddle.net/dwr5dmfg/ NOT OK

Problems

With the 2nd option, the pop-up opens but the content is not displayed. With the 3rd option, the pop-up is not displayed at all.

Questions

Why this behavior?

What should I do to have the el-dialog working normally while avoiding the v-if (I want to keep the data in cache since the dialog contains a lot of data)

解决方案

Based on @Max answer 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: {

  }
});

这篇关于Vue.js - 元素 UI - 嵌套对话框不会打开 - v-if v-show的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！