I have a component Modal.js:

const ModalComponent = Vue.component('modal-component', {
  template: `
  <v-dialog
    v-model="isModalOpen"
    persistent='isPersistent'
    width="300"
  >
    <slot name='loaderIndicator'></slot>
    <slot name='dialog'></slot>
  </v-dialog>
  `,
   props: {
     isModalOpen: {
       type: Boolean,
       required: true,
       default: function () {
         return false;
       }
     },
     isPersistent: {
       type: Boolean,
       default: function () {
         return this.$store.state.isLoading
       }
     }
  },
});

export default ModalComponent;

No matter what I tried - I can't set the persistent property value to 'false'. Tried it with props (as in the code above, as I want this component to get this prop), tried setting it directly to false, tried passing the prop in different ways (i.e. isPersistent='false', isPersistent=false, :isPersistent=..." - nothing worked.

Is there any way to change it? Or is having this property means this modal will be persistent no matter what? If that's the case - how can I add this prop dynamically?

1 Answers

0
Jinal Somaiya On Best Solutions

try below code:

template: `
    <v-dialog
        v-model="isModalOpen"
        :persistent='isPersistent'
        width="300"
    >
        <slot name='loaderIndicator'></slot>
        <slot name='dialog'></slot>
    </v-dialog>
`,