时间戳

首页 > 解决方案 > Vue JS 无限加载在 v-else 中不起作用

javascript - Vue JS 无限加载在 v-else 中不起作用

问题描述

您好，我想在我的模板中添加一个 vue 无限加载，但它不起作用

<generic-button v-if="!viewMore" inline no-arrow @click="viewMore = true"
            >{{ $t('components.slots.product-list.see-more-favoris') }}
            <template #icon-right>
              <icon-base width="17" height="10">
                <icon-arrow-down color="#ffffff" />
              </icon-base>
            </template>
          </generic-button>
          <infinite-loading
            v-else
            :distance="800"
            force-use-infinite-wrapper
            @infinite="infiniteHandler"
          ></infinite-loading>
<script>
export default {
data() {
    return {
      viewMore: false,
    };
  },

  methods: {
// function test to infinite loading

    infiniteHandler($state) {
     console.log('hello);
    }
  }
}
</script>

当我单击按钮时无限不显示我不明白为什么请帮助我谢谢

标签： javascriptvue.js

解决方案

我发现我的问题条件很好问题是我添加的 div 父级中的 cssdisplay:flex不好，因为无限加载有一个display我更改 css i aad 一个 div 父级 text-align:center很好我的加载是显示谢谢

推荐阅读