vue.js - 如何动态设置Veutify的对话框组件 'persistent'属性

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 =...” - 没有任何效果。

有什么办法可以改变吗？还是拥有此属性意味着无论如何此模式都将持久存在？如果是这种情况 - 我如何动态添加此 Prop ？

Answer 1

试试下面的代码:

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