条件渲染在引导 vue 上不起作用答案

【问题标题】：Conditional rendering not work on bootstrap vue条件渲染在引导 vue 上不起作用
【发布时间】：2019-12-06 03:29:13
【问题描述】：

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

【问题讨论】：

您可以在挂载后尝试控制台记录 getProducts 吗？
您是否看到任何控制台错误？ “不工作”是什么意思：当您检查卡片的内容时，DOM 中是否存在元素？
@onuriltan mount() { console.log(this.getProducts) } 正在从 firebase 获取数据，没有错误。
@skirtle 先生 v-else 不工作，我的意思是 firebase 中没有数据并且 v-if 工作所以表格没有显示。但即使没有数据，警报仍然隐藏。所以 v-else 条件不起作用
警报可能被隐藏的原因有很多。找出问题所在的关键是确定 DOM 元素是否存在。

标签： vue.js bootstrap-vue

【解决方案1】：

默认情况下隐藏警报。您需要将 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 的文档（请记住，文档是您最好的朋友）

【讨论】：

我现在完全明白了。我试图用 v-else 提醒，我忘记了绑定显示属性。很有帮助。