Vue中点击按钮时增加星期数

Question

我正在尝试通过单击 Vue.js 中的按钮来增加周数。因此，我有一个从本周开始的变量 currentWeekNumber，即 32。然后，我想要做的是单击按钮以增加 currentWeekNumbe 的数量，但不幸的是，我没有成功。即使我点击它仍然保持不变，32.你能看看吗？这是我的代码：

<template>
    <div class="container" id="app">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                <li
                    class="page-item"
                    v-bind:class="{ disabled: currentWeekNumber === 32 }"
                    v-on:click="currentWeekNumber -= 1"
                >
                    <a class="page-link" href="">Prev</a>
                </li>
                <!--                    change the currPage === 2 with currPage === weeksSize -->
                <li
                    class="page-item"
                    v-bind:class="{ disabled: currentWeekNumber === 35 }"
                    v-on:click="currentWeekNumber += 1"
                >
                    <a class="page-link" href="">Next {{currentWeekNumber}}</a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tickets: [],
            currentWeekNumber: this.getWeekNumber(new Date()),
        };
    },
    computed: {
        weeksSize() {
            const s = this.getAllWeekNumbers(this.tickets);
            return s.size;
        },
    },
    methods: {
        getWeekNumber(date) {
            const temp_date = new Date(date.valueOf());
            const dayn = (date.getDay() + 6) % 7;
            temp_date.setDate(temp_date.getDate() - dayn + 3);
            const firstThursday = temp_date.valueOf();
            temp_date.setMonth(0, 1);
            if (temp_date.getDay() !== 4)
            {
                temp_date.setMonth(0, 1 + ((4 - temp_date.getDay()) + 7) % 7);
            }
            return 1 + Math.ceil((firstThursday - temp_date) / 604800000);
        },
        findTicketsWeek(tickets) {
            return tickets.filter((ticket) => {
                return (
                    this.getWeekNumber(ticket.date) === this.currentWeekNumber
                );
            });
        },
    },
};
</script>

Answer 1

添加阻止点击事件将解决问题：

v-on:click.prevent="currentWeekNumber += 1"