Ich habe eine ziemlich umständliche Logik, die ich gerne auf eine Elementklasse anwenden würde.Klasse Binding Ternäroperator
:class="{sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'}"
Die oben nicht funktioniert, während das folgende tut:
:class="{'is-outlined': sportTypes.sports.indexOf(sport) > -1}"
ich folgende Fehler
template syntax error - invalid expression:
Irgendwelche Ideen, was mit dem ersten Teil falsch ist?
Sie haben unnötige Klammern. Der letzte Ausdruck ist ein Objekt, während der erste Ausdruck einfach ein ternärer Ausdruck ist, der eine Zeichenkette zurückgibt.
:class="sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'"
Wenn Sie Klassenbindungen in Vue anwenden möchten, verwenden Sie nur Klammern für Zuweisungen Objektstil wie in der zweiten Aussage. Für einzelne Bindungen tun Sie gerade ...
:class="sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'"
und wenn Sie mehrere Bindungen in der gleichen logischen Aussage anwenden wollen, umgeben Sie sie in [] statt {} und durch Komma getrennt.
Wie par die Syntax in der Dokumentation gegeben here, können Sie die Array-Syntax verwenden folgendes dies zu erreichen:
:class="[sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined']"