web-dev-qa-db-fra.com

Comment désactiver un lien dans le composant vue?

Mon html comme celui-ci:

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

Mon javascript comme celui-ci:

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

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

Démo et code complet comme celui-ci: https://jsfiddle.net/q7xcbuxd/221/

J'essaye comme ça. Mais si je clique sur le bouton ajouter, il n'est pas désactivé

Comment puis-je résoudre ce problème?

javascriptvue.jshyperlinkvuejs2vue-component
6
Success Man

Puisque vous utilisez boostrap, la bonne façon de désactiver un bouton (d'ancrage) n'est pas de définir .disabled = true, Mais de ajouter une classe disabled.

Deux autres notes. Vous souhaitez probablement empêcher le comportement par défaut de l'événement click, utilisez donc @click.prevent. De plus, si vous n'avez pas d'arguments supplémentaires, vous n'avez pas besoin d'utiliser ="add($event)", juste ="add" Suffira.

Démo ci-dessous:

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>

Vous pouvez également aller pur Vue et utiliser une liaison de classe:

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

Ajoutez un événement à votre élément et preventDefault.

Ensuite, ajoutez une classe css personnalisée qui griserait le bouton et le curseur de souris désactivé, et liez cette classe à votre élément.

CSS:

.disabled {
  cursor: not-allowed;
  color: gray
}

HTML:

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

JS:

computed: {
  disabledClass: () => {
    return isAddButtonDisabled ? "disabled" : ""
  }
}
2
Elpedio Jr. Adoptante

event.preventDefault () le désactiverait.

et . prevent le modificateur vous permet de l'ajouter facilement

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

2
Jacob Goh