如何在超链接中调用Vue.js方法？现有绑定代码存疑问

Hey there! Let's get your click event working smoothly. Your current code is already on the right track for binding the par method to the <a> tag's click event, but there's one common gotcha with anchor tags that might be causing unexpected behavior: their default page navigation action.

Here's how to fix it properly:

Option 1: Use the .prevent Modifier (Recommended) #

Vue provides event modifiers to handle common browser behaviors easily. Adding .prevent will stop the anchor tag from jumping to the top of the page (its default action) and only run your par method:

<li>
  <a @click.prevent="par" href="#"> Example 1</a>
</li>

Note: @click is just a shorthand for v-on:click—both work, but the shorthand is more commonly used in Vue projects.

Option 2: Remove the Default Navigation Behavior Manually #

If you prefer to handle it inside your method instead, you can pass the event object and call preventDefault():

<li>
  <a @click="par" href="#"> Example 1</a>
</li>

Then update your method:

par(event) {
  event.preventDefault();
  this.jsontocsv++;
}

This achieves the same result, but the modifier approach is cleaner and more idiomatic Vue.

Bonus: If You Don't Need the href at All #

If you don't require the anchor tag to have traditional link behavior (like being tab-accessible or styled as a link), you could also use a <span> or <button> with a click handler instead—though this depends on your specific use case.

Just to confirm: your original binding v-on:click="par" was correctly referencing the method—you just needed to suppress the default anchor tag behavior to make it work as expected!

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