时间戳

首页 > 解决方案 > 条件渲染在引导 vue 上不起作用

vue.js - 条件渲染在引导 vue 上不起作用

问题描述

我设置了一个引导表和引导警报，并使用了 bootstrap-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 不起作用。

标签： vue.jsbootstrap-vue

解决方案

默认情况下隐藏警报。您需要将show道具设置为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>

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

推荐阅读