Sterne verblassen nach dem Klick in Vue.js Komponente

Question

Ich möchte eine Sterne-Rating-Komponente in Vue.js machen und das Problem ist jetzt, dass, nachdem ich auf die Sterne klicke, es ausblendet, bevor das Endergebnis angezeigt wird. Unten ist die JSFiddle Link:

https://jsfiddle.net/L6L34ybr/5/

, die von der Wirkung verschieden ist, wo ich meistens den Code kopiert haben:

http://codepen.io/nouveller/pen/qOxKBJ

ich denke, es hat etwas mit der rating Eigenschaft zu tun hat .

Und jetzt habe ich die Klasse inline binden :class="{selected: ((value >= rating && value != null))}.

Aber ich möchte es mit einem Objekt wie :class="selected: someFunction(rating)" binden und dann schreiben Sie die someFunction(rating) in der berechneten Eigenschaft oder woanders nicht in der HTML. Gibt es eine Möglichkeit, es zu machen?

Answer 1

Statt

@click="setRate(rating)" 

Ihr Click-Ereignis definiert wie folgt:

@click.prevent="setRate(rating)" 

Dies wird das Click-Ereignis von der Ursache des Problems zu stoppen, das ist, dass es für die zweimal, einmal den Schuss Label und einmal für die Eingabe.

Was Ihre zweite Frage, können Sie Ihre someFunction() in Ihrer Komponente methods Objekt wie folgt hinzu:

methods: { 
    someFunction: function (value, rating) { 
     return value >= rating && value != null; 
    } 
} 

Dann Sie es in Ihrem Markup aufrufen können wie folgt:

<label :class="{selected: someFunction(value, rating)}">