Vue.js 2.3 - 元素 UI 对话框 - 同步和道具 [英] Vue.js 2.3 - Element UI Dialog - Sync and Props

问题描述

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

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

问题

dialog 只打开一次.当我关闭它时，出现此错误:

<块引用>

避免直接改变 prop，因为它的值会被覆盖每当父组件重新渲染时.相反，使用数据或根据道具的值计算出的属性.正在变异的道具:显示对话框"

问题

我做错了什么?

我该如何解决当前的情况?

编辑

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

<left-panel v-on:show="showDialog = true"></left-panel><popup v-if="showDialog":show-dialog.sync="showDialog"></popup>
<template id="left-panel-template"><button @click="$emit('show')">显示组件弹出窗口</button></模板><模板 id="popup"><el-dialog :visible.sync="showDialog" @visiblechange="updateShowDialog">我是弹窗</el-dialog></模板>Vue.component('左面板', {模板:'#left-panel-template',方法: {},});Vue.component('弹出窗口', {模板:'#popup'，道具:['showDialog']，方法: {updateShowDialog(isVisible) {如果(isVisible)返回false；this.$emit('update:showDialog', false )},},});var vm = new Vue({el: '#app',数据: {显示对话框:假，},方法: {}});

解决方案

您可以通过复制 prop 并对其进行变异而不是直接变异属性来避免变异警告.

Vue.component('popup', {模板:'#popup'，道具:['showDialog']，数据(){返回 {显示:this.showDialog}},方法: {updateShowDialog(isVisible) {如果(isVisible)返回false；this.$emit('update:showDialog', false )},},});

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

<el-dialog :visible.sync="show" @visible-change="updateShowDialog">我是弹窗</el-dialog>

更新了fiddle.

I'm using vue-js 2.3 and element-ui. Since the update 2.3 of vue-js and the reintroduction of sync, things have changed and I have had a hard time figuring out my problem.

Here is the jsfiddle : https://jsfiddle.net/7o5z7dc1/

Problem

The dialog is only opened once. When I close it I have this error:

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"

Questions

What am I doing wrong?

How can I fix the current situation?

EDIT

If I'm creating a data I manage to remove the error message but the dialog does not close anymore

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

      }
    });

解决方案

You avoid the mutation warning by making a copy of the prop and mutating that instead of mutating the property directly.

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

I also changed your template to handle the visible-change event correctly.

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

Updated fiddle.

这篇关于Vue.js 2.3 - 元素 UI 对话框 - 同步和道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！