0
votes

Bouton avec v-on: cliquez pour basculer entre les classes btn-primary et btn-primary-outline ne fonctionne pas

Je travaille sur un bouton qui ouvre un modal. Par défaut, il doit avoir la classe btn-primary-outline (texte bleu, fond transparent, bordure bleue), lorsque vous cliquez dessus, il doit avoir la classe btn-primary (texte blanc, fond bleu, bordure bleue). Mais cela ne fonctionne pas, le bouton reste transparent, le texte en bleu, et tout ce qu'il fait est d'activer et de désactiver la bordure du bouton bleu.

HTML:

data = {
     settingsButtonIsActive: false
}

vue.js bootstrap-4

0 commentaires

3 Réponses :

0
votes

Je l'ai corrigé en utilisant la syntaxe d'objet au lieu de la syntaxe de tableau.

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive"
        class="btn margin-top-half center-block col-xs-12"
        :class="{'btn-primary' : settingsButtonIsActive === true, 'btn-primary-outline' : settingsButtonIsActive === false}">
    <strong>{{labels.lblButtonConfiguration}}</strong>
</button>

1 commentaires

Ce n'est pas un vrai "correction" (code plus long + moins lisible) - l'opérateur (ternaire) est la meilleure idée de ce cas (voir ma réponse).

1
votes

Votre "erreur" vous utilisez une syntaxe de tableau mais la logique de "else" est vide '' (Si settingsButtonIsActive est false render => '' ) + toujours rendre btn-primary-outline ( L'opérateur (ternaire) à l'intérieur de l'index 0 - btn-primary-outline sur 1 indice).

Par exemple ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
  <button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
          :class="settingsButtonIsActive ? 'btn-primary' : 'btn-primary-outline'">
    <strong>{{msg}}</strong>: {{settingsButtonIsActive}}
  </button>
</div>

render:

button{
  padding: 5px;
  cursor: pointer;
}
.btn-primary{
  background: red;
  border: 1px solid red;
}

.btn-primary-outline{
  background: transparent;
  border: 1px solid red;
}

Pas en "vue", voici votre logique:

var app = new Vue({
  el: '#app',
  data: {
    msg: "settingsButtonIsActive",
    settingsButtonIsActive: true,
    isActive: "btn-primary",
    hasError: "btn-primary-outline"
  }
})

Ceci est le bon balisage (pour -ou- un -ou- b) - raccourci pour "if else":

class="settingsButtonIsActive ? 'btn-primary' : 'btn-primary-outline'">

Pas besoin d'elle pour la syntaxe des tableaux: https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

var element = document.getElementById("myDIV");

if(settingsButtonIsActive){
  element.classList.add("btn-primary");
}
else{
  element.classList.add(""); 
}

element.classList.add("btn-primary-outline");

<button class="btn-primary btn-primary-outline hello world">

:class="[settingsButtonIsActive ? 'btn-primary' : '', 'btn-primary-outline', 'hello', 'world']">

0 commentaires

1
votes

Je recommanderais de réécrire un peu le code.

Tout d'abord, vous pouvez écrire le commutateur de nom de classe en tant que propriété calculée:

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
    :class="['btn', 'margin-top-half', 'center-block', 'col-xs-12', {'btn-primary': isButtonActiveClass}, {'btn-outline-primary': !isButtonActiveClass}">
  <strong>{{labels.lblButtonConfiguration}}</strong>
</button>

puis vous pouvez fusionner les deux attributs de classe en un et liez-le comme ceci:

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
    :class="['btn', 'margin-top-half', 'center-block', 'col-xs-12', isButtonActiveClass">
  <strong>{{labels.lblButtonConfiguration}}</strong>
</button>

Il y a aussi une autre option, mais comme vous changez entre deux classes, je pense qu'une propriété calculée est une solution beaucoup plus propre . Cependant, vous pouvez également obtenir le même résultat avec ce code:

// ... beginning of your .js code
computed: {
    isButtonActive () {
      return this.settingsButtonIsActive ? 'btn-primary' : 'btn-outline-primary'
    }
}
// ... rest of your .js code

Notez que lorsque je veux changer de classe dynamiquement, je passe un objet dans le tableau.

Pour en savoir plus, consultez https: // vuejs. org / v2 / guide / class-and-style.html .

0 commentaires