How can i prevent this button from firing to the that url path??
I'm trying to make a method check based on some logic and then if it doesn't pass I need to prevent this button from doing anything.
Any help would be much appreciated:)
<v-btn
@click="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>
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...
<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
}