Cannot Make Vue.js Element-ui's Dialog Work While It's Inside A Child Component
Here is the parent component: .wrapper el-button(type='primary', @click='dialogAddUser = true') New User hr // Dialog: Add User add-ed
Solution 1:
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"Do
:visible="dialogVisible", v-on:update:visible="visibleSync = $event"Full code:
<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>
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>exportdefault {
name: 'add-user',
props: {
dialogVisible: Boolean
}
}
</script>
Post a Comment for "Cannot Make Vue.js Element-ui's Dialog Work While It's Inside A Child Component"