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

Question

我正在使用vue-js 2.3和element-ui.由于更新2.3的vue-js和重新引入sync,事情发生了变化,我有一个很难搞清楚我的问题.

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

问题

该dialog只开一次.当我关闭它时,我有这个错误:

避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖.而是根据prop的值使用数据或计算属性.Prop变异:"showDialog"

问题

我究竟做错了什么？

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

编辑

如果我正在创建一个data我设法删除错误消息但dialog不再关闭

<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

您可以通过制作道具的副本并对其进行变异而不是直接变异属性来避免变异警告。

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>

更新了小提琴。