[Vuejs]-Using v-btn to change route only if some condition is met

by

4👍

✅

If you don’t want the button to change route every time it is clicked but do it conditionally, do not use to prop!

Use only @click handler, check your conditions and then use $router.push({ name: 'New', params: { selected: this.selectedItems, readonly: false } }) inside the handler…

👤Michal Levý

0👍

Have you tried this?

<v-btn
  @click.prevent="checkIfCanCreateTO($event)"
  :to="{ name: 'New', params: { selected: selectedItems, readonly: false } }"
 >
  <v-icon small class="mr-2">mdi-account-plus</v-icon>
  Create New with
  {{ selectedItems.length }} item(s)
</v-btn>

Supplement to the answer

You can add "prevent events" to the function

checkIfCanCreateTO(event) {
  event.preventDefault();
  // your code
}
👤grovskiy

Leave a comment