VueJS show button when a value is not null

Question

I am very new to using VueJS and was wondering if there is a way to only show a button (that contains a slot) to only show if there is a button value given to the slot.

I'm using BootstrapVue Modals and the code is as follows:

I was not able to successfully get the modal running in the snippet but a screenshot of the opened modal is below.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>

<body>
  <div id="app">
    <b-btn @click="showModal" class="modalBtn">
      <slot name="modalOpenBtn">Open Me</slot>
    </b-btn>

    <b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
      <h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
            <p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>

      <div slot="modal-footer" class="w-100 d-flex align-items-center">
        <b-btn class="btn btn-teal btn-block font-14 w-100" block @click="hideModal">
          <slot name="modalCloseBtn">btn 1</slot>
        </b-btn>

        <b-btn class="btn btn-teal btn-block font-14 w-100" block @click="hideModal">
          <slot name="modalOkBtn">btn 2</slot>
        </b-btn>
      </div>
    </b-modal>
  </div>

  <script>
    new Vue({
      el: '#app',
      components: { App },
      methods: {
        showModal () {
          this.$refs.myModalRef.show()
        },
        hideModal () {
          this.$refs.myModalRef.hide()
        }
      }
    });
  </script>
</body>

</html>

tony19 · Accepted Answer · 2022-07-15 00:25:33Z

4

You can conditonally render any element with Vues v-if directive:

// generic
<button v-if="myBooleanCondition">...</button>

// exmaple
<button v-if="something == true">...</button>

https://v2.vuejs.org/v2/guide/conditional.html

edited Jul 15, 2022 at 0:25

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 7, 2018 at 7:35

TommyF

7,1708 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS show button when a value is not null

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related