如何动态设置 Veutify 的对话框组件“持久”属性

Question

我有一个组件 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;

无论我尝试了什么 - 我都无法将 persistent 属性值设置为“false”。用 props 试了一下（就像上面的代码一样，因为我想让这个组件获取这个 prop），尝试直接将其设置为 false，尝试以不同的方式传递 prop（即 isPersistent='false'，isPersistent=false，:isPersistent =...” - 没有任何效果。

有什么办法可以改变吗？或者拥有这个属性意味着无论如何这个模态都将是持久的？如果是这样的话 - 我怎样才能动态添加这个道具？

Answer 1

试试下面的代码：

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