仅在满足某些条件时才使用 v-btn 更改路线

Question

如何防止此按钮触发到该 url 路径？？

我正在尝试根据一些逻辑进行方法检查，如果没有通过，我需要阻止此按钮执行任何操作。

任何帮助将不胜感激:)

<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>

Answer 1

如果您不希望按钮每次单击时都更改路线但有条件地这样做，请不要使用to prop！

仅使用@click 处理程序，检查您的条件，然后在处理程序中使用$router.push({ name: 'New', params: { selected: this.selectedItems, readonly: false } })...

Answer 2

你试过了吗？

<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>

答案的补充

您可以在函数中添加“prevent events”

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