如何禁用 vue 组件中的链接？

Posted 2023-02-23

【中文标题】如何禁用 vue 组件中的链接？

【英文标题】：How can I disable a link in the vue component?

【发布时间】：2018-09-05 08:16:14

【问题描述】：

我的html是这样的：

<div id="app">
    <a class="btn btn-danger" href="javascript:" @click="add($event)">add</a>
</div>

我的 javascript 是这样的：

var vue = new Vue(
    el: '#app',

    methods: 
        add(event) 
            event.target.disabled = true
        
    
);

演示和完整代码如下：https://jsfiddle.net/q7xcbuxd/221/

我会这样尝试。但是如果我点击按钮添加，它不会被禁用

我该如何解决这个问题？

【参考方案1】：

由于您使用的是 boostrap，因此禁用（锚）按钮的正确方法不是设置.disabled = true，而是添加一个disabled 类。

另外两个笔记。您可能希望阻止click 事件的默认行为，因此请使用@click.prevent。另外，如果你没有额外的参数，你不需要使用="add($event)"，只需="add"就足够了。

下面的演示：

new Vue(
  el: '#app',
  methods: 
    add(event) 
      event.target.className += ' disabled'
    
  
)

body  padding: 10px 

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="app">
  <a class="btn btn-danger" href="javascript:" @click.prevent="add">add</a>
</div>

你也可以去 pure Vue 并使用类绑定：

new Vue(
  el: '#app',
  data: 
    btnDisabled: false
  ,
  methods: 
    add(event) 
      this.btnDisabled = true; // mutate data and let vue disable the element
    
  
)

body  padding: 10px 

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="app">
  <a class="btn btn-danger" href="javascript:" @click.prevent="add" :class="disabled: btnDisabled">add</a>
</div>

【讨论】：

我想问。如果像这样禁用类：event.target.className += ' disabled'。如果我想启用按钮怎么办？

你会做event.target.className = event.target.className.replace(/\disabled\b/g, "");。如果你可以放弃 IE（或者如果你可以添加 polyfill），也许使用 classList 是一个更干净的选择：element.classList.add("disabled"); 和 element.classList.remove("disabled");

【参考方案2】：

向您的元素添加一个事件并防止默认。

然后，添加一个自定义 css 类，该类将使按钮变灰并禁用鼠标光标，并将该类绑定到您的元素。

CSS：

.disabled 
  cursor: not-allowed;
  color: gray

HTML：

<a href=""  @click.prevent="add" :class="disabledClass" >Add</a>

JS：

computed: 
  disabledClass: () => 
    return isAddButtonDisabled ? "disabled" : ""
  

【参考方案3】：

event.preventDefault() 会禁用它。

和.prevent修饰符让你可以轻松添加它

@click.prevent="add($event)"