无法使 vue.js element-ui 的对话框在子组件内工作 [英] Cannot make vue.js element-ui's dialog work while it's inside a child component

问题描述

这是父组件:

<template lang="pug">
  .wrapper
    el-button(type="primary", @click="dialogAddUser = true") New User
    hr
    // Dialog: Add User
    add-edit-user(:dialog-visible.sync="dialogAddUser")
</template>

<script>
import * as data from '@/components/partials/data'
import AddUser from './partials/AddUser'

export default {
  name: 'users',
  components: { AddUser },

  data () {
    return {
      users: data.users,
      dialogAddUser: false
    }
  }
}
</script>

这是子组件:

<template lang="pug">
  el-dialog(width="75%", title="New User", :visible.sync="dialogVisible", top="5vh")
    div 'el-dialog-body' - content goes here
</template>

<script>
  export default {
    name: 'add-user',
    props: {
      dialogVisible: Boolean
    }
  }
</script>

我可以打开 dialog 但是当使用 dialog 内的右上角按钮关闭对话框时，我收到此错误:

I am able to open the dialog but when close the dialog using top right button inside the dialog then I am getting this error:

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

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: "dialogVisible"

后来我试着玩了，做了类似下面的事情，但现在我什至无法打开dialog:

Later I tried to play and did something like below, but now I cannot even open the dialog:

<template lang="pug">
  el-dialog(width="75%", title="New User", :visible.sync="visibleSync", top="5vh")
    div 'el-dialog-body' - content goes here 
</template>

<script>
  export default {
    name: 'add-user',
    props: {
      dialogVisible: Boolean
    },
    watch: {
      visibleSync (val) {
        this.$emit('update:dialogVisible', val)
      }
    },
    data () {
      return {
        visibleSync: this.dialogVisible
      }
    }
  }
</script>

推荐答案

如果 visible.sync 有效，则组件正在发出 update:visible 事件.

If visible.sync works, the component is emitting an update:visible event.

因此，不要在子级中发生变异，而是将事件传播到父级，而不是:

So, to not mutate in the child and, instead, propagate the event to the parent, instead of:

:visible.sync="dialogVisible"

做

:visible="dialogVisible", v-on:update:visible="visibleSync = $event"

完整代码:

<template lang="pug">
  el-dialog(width="75%", title="New User", :visible="dialogVisible", v-on:update:visible="visibleSync = $event", top="5vh")
    div 'el-dialog-body' - content goes here 
</template>

<script>
  export default {
    name: 'add-user',
    props: {
      dialogVisible: Boolean
    },
    watch: {
      visibleSync (val) {
        this.$emit('update:dialogVisible', val)
      }
    },
    data () {
      return {
        visibleSync: this.dialogVisible
      }
    }
  }
</script>

<小时>

作为另一种选择，您可以直接从 v-on 侦听器发出，而无需 visibleSync 本地属性:

---

As another alternative, you could emit directly from the v-on listener and do without the visibleSync local property:

<template lang="pug">
  el-dialog(width="75%", title="New User", :visible="dialogVisible", v-on:update:visible="$emit('update:dialogVisible', $event)", top="5vh")
    div 'el-dialog-body' - content goes here 
</template>

<script>
  export default {
    name: 'add-user',
    props: {
      dialogVisible: Boolean
    }
  }
</script>

这篇关于无法使 vue.js element-ui 的对话框在子组件内工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！