Question

我有一个Vue.js组件App.vue，我想通过@click结合v-if，v-else指令来动态附加/分离组件。我也想要jQuery动画滚动。这是我的代码：

<template>
    <div class="container">
        <RingsProduction v-if="flag"></RingsProduction>
        <RingsGuide v-else></RingsGuide>
        <nav @click="scroll" aria-label="Page navigation" class="text-center js-btn">
            <ul class="pagination">
                <li>
                    <a aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a>1</a>
                </li>
                <li>
                    <a>2</a>
                </li>
                <li>
                    <a>3</a>
                </li>
                <li>
                    <a aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
    import RingsProduction from "./components/RingsProduction.vue";
    import RingsGuide from "./components/RingsGuide.vue";

    export default {
        name: "app",
        components: {
            RingsProduction,
            RingsGuide
        },
        data: function () {
            return {
                flag: true
            };
        },
        methods: {
            scroll: function () {
                $(".js-btn").click(function () {
                    $("html, body").animate(
                        {
                            scrollTop: $(".scroll-top").offset().top
                        },
                        200
                    );
                });
                this.flag = !this.flag;
            }
        }
    };
</script>

<style lang="sass">
    .pagination cursor: pointer
</style>

一切正常，但是第一次单击后。当我第一次单击导航栏时，该标志正在更改，但是滚动没有运行。组件已更改，但滚动仍在页面底部。第二次单击后，它应会正常工作。我没有收到任何控制台或Vue开发人员警告或错误，因此我一无所获。

最奇怪的是，第一次点击后，它确实可以正常工作。

Answer 1

我可能是错的，但是您已经在使用@click绑定监听“ click”事件。我认为这里发生的是当您调用滚动功能@click时正在设置事件监听器： $(".js-btn").click(function () { 然后，当您第二次单击该事件侦听器正在运行代码时。删除这部分怎么样？

$(".js-btn").click(function () {

您的代码如下所示：

<script>
    import RingsProduction from "./components/RingsProduction.vue";
    import RingsGuide from "./components/RingsGuide.vue";

    export default {
        name: "app",
        components: {
            RingsProduction,
            RingsGuide
        },
        data: function () {
            return {
                flag: true
            };
        },
        methods: {
            scroll: function () {

                    $("html, body").animate(
                        {
                            scrollTop: $(".scroll-top").offset().top
                        },
                        200
                    );

                this.flag = !this.flag;
            }
        }
    };
</script>

Answer 2

可能是，如果您可以尝试切换到.on方法以为按钮注册事件处理程序“单击”

为什么滚动式方法仅在第一次执行后才能工作？

2 个答案: