Element UI 对话框组件第一次可以打开，第二次打不开答案

【问题标题】：Element UI dialog component can open for the first time, but it can't open for the second timeElement UI 对话框组件第一次可以打开，第二次打不开
【发布时间】：2019-12-06 01:06:35
【问题描述】：

我正在使用 Vue、Nuxt 和 Element UI 构建 Web 应用程序。我对元素对话框组件有疑问。第一次可以打开，第二次不能打开。

这是关于我的问题的 GIF。

https://gyazo.com/dfca3db76c75dceddccade632feb808f

这是我的代码。

index.vue

<template>
  <div>
    <el-button type="text" @click="handleDialogVisible">click to open the Dialog</el-button>
    <modal-first :visible=visible></modal-first>
  </div>
</template>
<script>

import ModalFirst from './../components/ModalFirst.vue'

export default {
  components: {
    'modal-first': ModalFirst
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handleDialogVisible() {
      this.visible = true;
    }
  }
}
</script>

ModalFirst.vue

<template>
  <el-dialog
    title="Tips"
    :visible.sync="visible"
    width="30%"
  >
    <span>This is a message</span>
    <span slot="footer" class="dialog-footer">
      <a>Hello</a>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    props: [ 'visible' ]
  }
</script>

关闭对话框后，我可以在 google chrome 控制台上看到一条警告消息。警告信息如下。

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: 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: "visible"

found in

---> <ModalFirst> at components/ModalFirst.vue
       <Pages/index.vue> at pages/index.vue
         <Nuxt>
           <Layouts/default.vue> at layouts/default.vue
             <Root>

这是警告信息的截图。

https://gyazo.com/83c5f7c5a8e4d6816c35b3116c80db0d

【问题讨论】：

标签： vuejs2 nuxt.js element-ui

【解决方案1】：

在 vue 中，直接使用 to prop value 是不允许的。特别是当您的子组件将更新该道具值时，在我的选项中是否使用道具仅用于显示直接使用没有问题。

在您的代码中，.sync 将同步更新数据，因此我建议创建本地数据。

ModalFirst.vue

<el-dialog
title="Tips"
:visible.sync="localVisible"
width="30%"
>
<script>
  export default {
    props: [ 'visible' ],
    data: function () {
       return {
          localVisible: this.visible // create local data using prop value
       }
    }
  }
</script>

【讨论】：

谢谢，但这对我不起作用。我认为 localVisible 没有从 false 更改为 true，但可见道具从 false 更改为 true。请看下面的 gif。 gyazo.com/2a59709ed3bfd72c7fa9da00ae87cd78我该如何解决？
您将无法更新 prop 值，因为无法在子组件中设置 props。一种解决方法是使用@input 将更新后的值传递回父组件，并让您的父组件更新visible 数据变量。

【解决方案2】：

如果您需要更新父 visible 属性，您可以创建您的组件以利用 v-model：

ModalFirst.vue

<el-dialog
title="Tips"
:visible.sync="localVisible"
width="30%"
>
<script>
  export default {
    props: [ 'value' ],
    data() {
       return {
          localVisible: null
       }
    },
    created() {
        this.localVisible = this.value;
        this.$watch('localVisible', (value, oldValue) => {
            if(value !== oldValue) { // Optional
                this.$emit('input', value); // Required
            }
        });
    }
  }
</script>

index.vue

<template>
  <div>
    <el-button type="text" @click="handleDialogVisible">click to open the Dialog</el-button>
    <modal-first v-model="visible"></modal-first>
  </div>
</template>
<script>

import ModalFirst from './../components/ModalFirst.vue'

export default {
  components: {
    'modal-first': ModalFirst
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handleDialogVisible() {
      this.visible = true;
    }
  }
}
</script>

v-model 基本上是:value 和@input 的简写

https://vuejs.org/v2/guide/forms.html#Basic-Usage

旁注：

你也可以像这样导入你的组件：

components: { ModalFirst },

ModalFirst 也会被 Vue.js 解释为 modal-first

【讨论】：