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

user_5810178 0
Viewed 9859

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>
bootstrap-vue nuxt.js vue.js
3 Answers

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.

user_83979740

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

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

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.

user_18389840
Related