coreui-vue icon indicating copy to clipboard operation
coreui-vue copied to clipboard

CModal won't show when calling component with v-if condition

Open buzzclue opened this issue 3 years ago • 2 comments

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. image

buzzclue avatar Jul 01 '22 21:07 buzzclue

image

I've fixed it localy by wrapper

DogFox avatar Aug 12 '22 11:08 DogFox

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

github-actions[bot] avatar Oct 11 '22 14:10 github-actions[bot]