vue.js bedingtes Rendern eines Attributs

Ich möchte erfahren, wie man in Vue.js ein HTML-Attribut am besten rendern kann. Fügen Sie z. B. data-toggle="tooltip" hinzu, wenn eine Tooltip-Nachricht für die aktuelle Instanz vorhanden ist.vue.js bedingtes Rendern eines Attributs

Der Code Ich habe jetzt:

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

Obwohl, ich weiß nicht wie die zweite Linie viel ... Auch wenn ich hier berechnete Eigenschaft verwenden, würde ich es vorziehen, nicht data-toggle Attribut überhaupt zu haben, wenn Es gibt keinen Tooltip zum Anzeigen.

Quelle

2017-01-16 pilat

Wenn Sie nicht möchten, dass das Attribut überhaupt existiert, wenn es keine QuickInfo gibt, würde ich das wahrscheinlich nicht in der Vorlage tun, sondern eher in eingehängten() oder ähnlichem. – Bert

Hier ist eine andere Arbeits aber nicht so elegante Lösung:

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

Quelle

2017-01-17 03:31:24

Etwas wie:

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

Und in Vue:

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

Quelle

2017-01-16 17:42:20 Bert

Sehr saubere Art es zu tun –

Ein bisschen spät, aber hier ist mein nehmen darauf:

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; 
    } 
}

Dies wird die "Daten-Original-title" Attribut entfernen, wenn es keine gibt, folglich angezeigt werden insgesamt den Tooltip zu entfernen. Sie müssen "data-original-title" anstelle von "title" verwenden, da Bootstrap dieses automatisch hinzufügt, sobald Sie das Attribut "title" initialisiert haben. Wenn Sie "title" in false ändern, wird der "data-original-title" nicht entfernt.

Quelle

2017-06-02 15:59:17 nikojpapa

vue.js bedingtes Rendern eines Attributs

Antwort

Verwandte Themen