Conditional rendering not work on bootstrap vue

Question

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.

Do you see any console errors? What do you mean by 'not working': are the elements present in the DOM when you inspect the contents of the card? — skirtle
– skirtle, Commented Jul 28, 2019 at 21:03
@onuriltan mounted() { console.log(this.getProducts) } is getting datas from firebase, there is no error. — bomi
– bomi, Commented Jul 28, 2019 at 21:21
@skirtle Sir v-else not working, i mean there is no data in firebase and v-if working so table is not showing. But even if there no data, alert still hidden. So v-else condition not works — bomi
– bomi, Commented Jul 28, 2019 at 21:23
There are many reasons why the alert might be hidden. The key to figuring out where the problem lies is to establish whether the DOM elements are present. — skirtle
– skirtle, Commented Jul 29, 2019 at 7:23

Troy Morehouse · Accepted Answer · 2019-07-31 04:14:38Z

2

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)

edited Jul 31, 2019 at 4:14

answered Jul 31, 2019 at 3:40

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

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

1 Comment

bomi Over a year ago

I totally understand now. I was trying to alert with v-else, i forgot the binding show attribute. It's helpful.

Collectives™ on Stack Overflow

Conditional rendering not work on bootstrap vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related