CODEWITHSUNDEEP
vue.jsbootstrap-vue
bomi
bomi

Reputation: 113

Conditional rendering not work on bootstrap vue

I set up a bootstrap table and bootstrap alert and i use bootstrap-vue plugin. I want to show alert when there is no data in my products data.

When there is no data, table is hidden but alert is not working

I tried v-if, v-else-if and v-else conditions on my alert but these are not working.

<b-card cols="12" class="mb-5 mt-5 shadow"
                title="ALL PRODUCTS">
          <hr>
          <b-card-body>
            <b-table hover bordered :items="items" :fields="fields" class="text-center" v-if="getProducts.length>0">
              <template slot="key" slot-scope="data">
                <b-badge variant="info">{{data.item.key}}</b-badge>
              </template>
              <template slot="count" slot-scope="data">
                <span class="font-weight-bold" :class="countClasses(data.item.count)">{{data.item.count}}</span>
              </template>
              <template slot="price" slot-scope="data">
                {{data.item.price|currency}}
              </template>
            </b-table>

            <b-alert variant="warning" v-else>
              <strong>There is no data..</strong>
              <p class="mb-0">To add data please use Add button at the navbar.</p>
            </b-alert>
          </b-card-body>
        </b-card>



<script>
import {mapGetters} from 'vuex'

export default {

data(){
return {
items: []
},
computed: {
      ...mapGetters(['getProducts']),
    },
    created() {
      this.items = this.getProducts
    },
}
}

</script>

Alert v-else is not working.

Upvotes: 1

Views: 1850

Answers (1)

Troy Morehouse
Troy Morehouse

Reputation: 5435

Alerts are hidden by default. You need to set the show prop to true to show the alert.

<b-alert variant="warning" :show="getProducts.length === 0">
  <strong>There is no data..</strong>
  <p class="mb-0">To add data please use Add button at the navbar.</p>
</b-alert>

See the docs at https://bootstrap-vue.js.org/docs/components/alert#visible-state (remember, the documentation is your best friend)

Upvotes: 2

Related Questions