Question

我正在使用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

Answer 1

在vue中，不允许直接用于支持价值。特别是当您的子组件将更新该prop值时，如果使用prop则由我选择仅用于直接显示不是问题。

在您的代码中，.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>

Answer 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 },

Vue.js也将

ModalFirst解释为modal-first

元素UI对话框组件可以第一次打开，但不能第二次打开

2 个答案: