【问题标题】:Using v-btn to change route only if some condition is met仅在满足某些条件时才使用 v-btn 更改路线
【发布时间】:2021-09-17 11:41:54
【问题描述】:

如何防止此按钮触发到该 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>

【问题讨论】:

  • 你可能想要disable这个按钮?
  • 我不想禁用它,我需要阻止这个事件发生
  • 禁用按钮通常会做什么

标签: javascript vue.js vuejs2 vuetify.js


【解决方案1】:

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

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

【讨论】:

    【解决方案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
    }
    

    【讨论】:

    • 是的,它似乎不起作用
    • @Robertas 在我的回答中,添加了新信息,再试一次
    • 我以前也试过这个,不工作..
    • @Robertas 那我不知道你的问题是什么。你能形成预期的结果和实际的结果吗?还有更多数据。您可以更新您的问题。添加您的 checkIfCanCreateTO 函数。
    • 预期的结果是,一旦我单击 btn,我会在我的方法中进行一些检查,如果检查失败,我会阻止此按钮将我重定向到 New,并且只是发出警报或某事出错了
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-22
    • 2018-06-26
    相关资源
    最近更新 更多