仅在满足某些条件时使用 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

你试过这个吗？

<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 个事件”

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

Answer 2

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

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

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

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

javascript

vue.js

vuejs2

vuetify.js

你试过这个吗？