VueJS - 视口混合中的vue不起作用

问题描述 投票:1回答:1

当视口在组件上时我想要激活我的功能,我尝试使用:https://github.com/BKWLD/vue-in-viewport-mixin但是不起作用。有人能解释一下我做错了什么吗?谢谢!

<template>
    <div class="box has-text-centered" id='count' v-if='inViewport.now'>
        /.../
    </div>
</template>

<script>
    import axios from 'axios';
    import * as inViewport from './mixins/vue-in-viewport-mixin';

    export default {
        name: 'Counter',
        data() {
            return {
                 /.../
                inViewport: {
                    now: false
                }
            }
        },
        methods: {
            count: function() {
                const that = this;
                setInterval(function() {
                    if (that.number < that.numberOfLikes) {
                        that.number += 1
                    }
                }, 1)
            }
        },
        mixins: [inViewport],
        watch: {
            'inViewport.now': function(visible) {
                visible ? this.count() : console.log('not')
            }
        }
    }
</script>

编辑

相反,我使用https://github.com/Akryum/vue-observe-visibility,它的工作原理。

vue.js mixins
1个回答
1
投票
<div class="box has-text-centered" id='count' v-if='inViewport.now'>
    /.../
</div>

如果在模板中的根标记处有v-if,则它无法正常工作。尝试将v-if枯萎移动到您调用此组件的父组件,或者移动v-if下面的一个级别,如:

<div class="box has-text-centered" id='count'>
    <div v-if='inViewport.now'> /../ </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.