Vue中点击按钮无法递增周数变量currentWeekNumber的问题排查求助

Hey there! Let's break down why your week number won't increment when you click the button and fix it up.

The Root Cause #

The main problem is the <a> tags with href="" in your pagination links. When you click these links, the browser triggers its default behavior: reloading the entire page. This means your Vue component gets re-mounted every time, and currentWeekNumber gets re-initialized to the value from getWeekNumber(new Date())—that's why it stays stuck at 32!

Step-by-Step Fixes #

We'll address this with two key improvements:

1. Prevent Default Link Behavior

Add the .prevent modifier to your click events to stop the page from reloading. This tells Vue to intercept the click and skip the browser's default navigation.

2. Move Logic to Methods (Cleaner & More Maintainable)

Instead of modifying currentWeekNumber directly in the template, wrap the increment/decrement logic in component methods. This makes your code easier to debug and lets you add boundary checks (like not going below 32 or above 35) seamlessly.

Modified Code #

Here's your updated code with these fixes:

<template> 
<div class="container" id="app"> 
<nav aria-label="Page navigation"> 
<ul class="pagination justify-content-center"> 
<li class="page-item" :class="{ disabled: currentWeekNumber === 32 }" @click="prevWeek"> 
<a class="page-link" href="#" @click.prevent>Prev</a> 
</li> 
<li class="page-item" :class="{ disabled: currentWeekNumber === 35 }" @click="nextWeek"> 
<a class="page-link" href="#" @click.prevent>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; 
}); 
}, 
// New navigation methods with boundary checks
prevWeek() { 
if (this.currentWeekNumber > 32) { 
this.currentWeekNumber -= 1; 
} 
}, 
nextWeek() { 
if (this.currentWeekNumber < 35) { 
this.currentWeekNumber += 1; 
} 
} 
}, 
}; 
</script>

Key Changes Explained #

• @click.prevent on the <a> tags stops page reloads entirely.
• prevWeek and nextWeek methods add safety checks to ensure you can't go outside your desired week range (32-35).
• Used Vue's shorthand @click instead of v-on:click for cleaner, more readable syntax.

Bonus Tip #

If you don't need the <a> tag at all (since we're blocking navigation), you could replace it with a <span> and adjust Bootstrap classes to keep the styling intact—but the fix above works perfectly with your existing structure.

Give this a try, and your week number should start incrementing/decrementing as expected!

内容的提问来源于stack exchange，提问作者magic bean