¿Cómo puedo deshabilitar un enlace en el componente vue?

Esta inquietud se puede tratar de variadas formas, sin embargo te enseñamos la solución más completa en nuestra opinión.

Solución:

Dado que está utilizando boostrap, la forma correcta de desactivar un botón (anclaje) es no establecer .disabled = truesino Agrega un disabled clase.

Otras dos notas. Probablemente desee evitar el comportamiento predeterminado del click evento, así que usa @click.prevent. Además, si no tiene argumentos adicionales, no necesita usar ="add($event)"sólo ="add" Será suficiente.

Demostración a continuación:

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

body  padding: 10px 

  add

también puedes ir puro Vue y use un enlace de clase:

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

body  padding: 10px 

  add

Agregue un evento a su elemento y preventDefault.

Luego, agregue una clase css personalizada que atenúe el botón y con el cursor del mouse deshabilitado, y vincule esa clase a su elemento.

CSS:

.disabled 
  cursor: not-allowed;
  color: gray

HTML:

Add

JS:

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

event.preventDefault() lo deshabilitaría.

y el modificador .prevent le permite agregarlo fácilmente

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

Finalizando este artículo puedes encontrar las referencias de otros programadores, tú asimismo eres capaz insertar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador