CODEWITHSUNDEEP
vue.jsnuxt.jsbootstrap-vue
Don D
Don D

Reputation: 754

How to disable modal-ok slot of b-modal in vue bootstrap?

I have used modal-ok slot available in b-modal slots to render the OK button of b-modal. I want to conditionally disable the OK button. I have tried 2 methods with no luck. Any suggestion is welcome on how to disable the OK button rendered using the slot.

  1. Disabled prop

     <div
    slot="modal-ok"
    :disabled="true"
    @click.stop="uploadFile(item.id)"
  >
    Upload
  </div>

  2. ok-disabled prop of b-modal

      <div
    slot="modal-ok"
    :ok-disabled="true"
    @click.stop="uploadFile(item.id)"
  >
    Upload
  </div>

Upvotes: 7

Views: 15461

Answers (3)

Mihai
Mihai

Reputation: 26804

Just add hide-footer if you want to get rid of the buttons

<b-modal hide-footer>
  <!-- Content -->
</b-modal>

Upvotes: 12

Hiws
Hiws

Reputation: 10434

Use the ok-disabled prop on <b-modal>, to conditionally enable/disable the ok button.

<b-modal :ok-disabled="true">
  <!-- Content -->
</b-modal>

For more information check out this section of the documentation.

Upvotes: 11

farincz
farincz

Reputation: 5173

model-ok scope can't modify button itself, it just change button content

You need to use modal-footer scope instead and declare buttons manually there.

Upvotes: 3

Related Questions