coreui-vue
coreui-vue copied to clipboard
CModal won't show when calling component with v-if condition
Bug reports must include: Operating system: Windows 10 Browser: Tested on Firefox (102.0), Chrome
EditModal.vue
<template>
<CModal
:visible="isEditing"
@close="
() => {
isEditing = false
}
"
alignment="center"
ref="modal"
>
<CModalHeader>
<CModalTitle>{{ $t('common.editRole') }}</CModalTitle>
</CModalHeader>
<CModalBody>
<text-input v-model="form.name" :error="form.errors.name" :label="$t('common.name')" />
<textarea-input v-model="form.description" :error="form.errors.description" :label="$t('common.description')" />
</CModalBody>
<CModalFooter>
<CButton
color="secondary"
@click="
() => {
isEditing = false
}
"
>
{{ $t('common.cancel') }}
</CButton>
<CButton color="primary">{{ $t('common.update') }}</CButton>
</CModalFooter>
</CModal>
</template>
<script>
import TextInput from '@/Shared/fields/TextInput'
import TextareaInput from '@/Shared/fields/TextareaInput'
export default {
props: {
isEditing: {
type: Boolean,
default: false,
},
role: {
type: Object,
required: true,
},
},
components: {
TextInput,
TextareaInput,
},
data() {
return {
form: this.$inertia.form({
id: null,
name: null,
description: null,
default: null,
guest: null,
}),
}
},
methods: {
save: function () {},
},
}
</script>
When calling modal using v-if it mounts but doesn't show
<edit-role v-if="isEditing" :isEditing="isEditing" @close="isEditing = false" :role="roleToEdit" />
In the dom modal element is created but it won't show with v-if condition.


I've fixed it localy by wrapper
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions