Question

我设置了一个引导表和引导警报，并使用了boots-vue插件。我想在产品数据中没有数据时显示警报。

没有数据时，表被隐藏，但警报不起作用

我在警报中尝试了v-if，v-else-if和v-else条件，但是这些条件不起作用。

<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>

警报v-else无法正常工作。

Answer 1

默认情况下，警报是隐藏的。您需要将true属性设置为<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>才能显示警报。

{{1}}

请参阅https://bootstrap-vue.js.org/docs/components/alert#visible-state上的文档（请记住，文档是您最好的朋友）

条件渲染不适用于bootstrap vue

1 个答案: