vue.js rendu conditionnel d'un attribut

Question

J'aimerais savoir quel est le meilleur moyen de rendre conditionnellement un attribut HTML dans Vue.js. Par exemple, ajoutez data-toggle="tooltip" s'il existe un message d'info-bulle pour l'instance actuelle.

Le code que j'ai maintenant:

<span
  :data-toggle="!!col.col_spec.tooltip ? 'tooltip' : ''"
  :title="col.col_spec.tooltip"
>
  {{ col.col_spec.title }}
</span>

Bien que je n'aime pas trop la 2ème ligne… Même si j'utilise la propriété calculée ici, je préférerais ne pas avoir d'attribut data-toggle du tout, lorsqu'il n'y a pas d'infobulle à afficher.

Answer 1

Une solution très élégante:

<span
  :data-toggle="!!col.col_spec.tooltip ? 'tooltip' : false"
  :title="col.col_spec.tooltip"
>
  {{ col.col_spec.title }}
</span>

Oui, oui, oui, il faut simplement qu'il n'y ait pas un chaîne vide, mais un booléen false

Answer 2

Quelque chose comme:

<span ref="column">
  {{ col.col_spec.title }}
</span>

Et dans Vue:

mounted(){
    if (this.col.col_spec.tooltip){
      this.$refs.column.setAttribute("data-toggle", this.col.col_spec.tooltip);
    }
}

Answer 3

Un peu tard, mais voici mon point de vue:

HTML:

<span
  :data-toggle="tooltip"
  :data-original-title="tooltipTitle"
>
  {{ tooltipTitle }}
</span>

Vue:

methods: {
    tooltipTitle: function() {
        var title = this.col.col_spec.title;
        if (!!title) return title;
        return false;
    }
}

Cela supprimera l'attribut "data-original-title" s'il n'y en a pas à afficher, ce qui supprime complètement l'info-bulle. Vous devez utiliser "data-original-title" au lieu de "title" car Bootstrap l'ajoutera automatiquement une fois que vous aurez initialisé l'attribut "title", et le fait de remplacer "title" par false ne supprimera pas le "data-original-title".

Answer 4

Voici une autre solution efficace mais pas aussi élégante: 

<span v-if="!!col.col_spec.tooltip" data-toggle="tooltip" >
    {{ col.col_spec.title }}
</span>
<span v-else >
    {{ col.col_spec.title }}
</span>