时间戳

首页 > 解决方案 > 如何动态设置 Veutify 的对话框组件“持久”属性

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

问题描述

我有一个组件 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属性值设置为“假”。用 props 尝试过（如上面的代码，因为我希望这个组件获取这个 prop），尝试将其直接设置为 false，尝试以不同的方式传递 prop（即 isPersistent='false'，isPersistent=false，:isPersistent =...” - 没有任何效果。

有没有办法改变它？或者拥有这个属性意味着无论如何这个模态都将是持久的？如果是这种情况 - 我如何动态添加这个道具？

标签： vue.jsvuejs2vue-componentvuetify.js

解决方案

试试下面的代码：

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

推荐阅读