Vue.js 2.3 - 元素 UI 对话框 - 同步和 Prop

Question

我正在使用 vue-js 2.3 和 element-ui。自 vue-js 更新 2.3 并重新引入 sync 以来，情况发生了变化，我很难弄清楚我的问题。

这是 jsfiddle:https://jsfiddle.net/7o5z7dc1/

问题

对话框 只打开一次。当我关闭它时出现此错误:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "showDialog"

问题

我做错了什么？

我该如何解决目前的情况？

编辑

如果我正在创建一个数据，我会设法删除错误消息，但对话框不会再关闭

<div id="app">
      <left-panel v-on:show="showDialog = true">></left-panel>
      <popup v-if="showDialog":show-dialog.sync="showDialog"></popup>
    </div>

    <template id="left-panel-template">
      <button @click="$emit('show')">Show Component PopUp</button>
    </template>


    <template id="popup">
        <el-dialog :visible.sync="showDialog" @visiblechange="updateShowDialog">I am the popup</el-dialog>
    </template>


        Vue.component('left-panel', {
      template: '#left-panel-template',
      methods: {
      },
    });

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

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

      }
    });

Answer 1

您可以通过制作 prop 的副本并改变它而不是直接改变属性来避免突变警告。

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

我还更改了您的模板以正确处理 visible-change 事件。

<el-dialog :visible.sync="show" @visible-change="updateShowDialog">I am the popup</el-dialog>

已更新 fiddle .