In a Vue.js component, the brilliance of stars dims once they are clicked

Question

In a Vue.js component, the brilliance of stars dims once they are clicked

Currently, I am working on creating a star-rating component using Vue.js. The issue I am facing is that when I click on the stars, they fade out before displaying the final result. You can find the JSFiddle link below:

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

This behavior differs from the effect showcased in the code I mostly copied from:

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

I suspect that the issue may be related to the rating property.

Currently, I have inline bound the class like so:

:class="{selected: ((value >= rating && value != null))}

.

However, I would prefer to bind it with an object using something like

:class="selected: someFunction(rating)"

, and then define the someFunction(rating) in the computed property or another location outside of the html. Is there a way to achieve this?

javascript vue.js vue-component

Answer 1

Answer №1

Instead of

@click="setRate(rating)"

try defining your click event like this:

@click.prevent="setRate(rating)"

By doing this, you can prevent the click event from triggering twice, once for the label and once for the input.

Regarding your second question, you can include your someFunction() in the methods object of your component like so:

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

Then you can use it in your markup as shown below:

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

Answer 2

Instead of

@click="setRate(rating)"

try defining your click event like this:

@click.prevent="setRate(rating)"

By doing this, you can prevent the click event from triggering twice, once for the label and once for the input.

Regarding your second question, you can include your someFunction() in the methods object of your component like so:

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

Then you can use it in your markup as shown below:

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

In a Vue.js component, the brilliance of stars dims once they are clicked

Answer №1

Similar questions

Preserve marked checkboxes upon page refresh

"Optimizing navigation with dynamic link routing in AngularJS

Is there a way to transfer table data from one table to another table using AngularJS?

Effort to update Div element with Ajax fails to function

Hide modal once form has been successfully submitted

Is there a way to remove unnecessary code from the end of a string using JavaScript?

Tips for concealing a component in the DOM using ng-if in angular.js and angularmaterial:

Is it possible to view the mousehover action in real-time on the browser screen when using Selenium?

Is a fresh connection established by the MongoDB Node driver for each query?

I can't seem to retrieve any values from the API other than "chicken"

AngularJS Error: [$injector:modulerr] - I'm new to this

Saving data in a function component's state variable

Inserting Text with Line Breaks into a Textarea Using jQuery and PHP MySQL

leveraging dependency injection to retrieve a function in JavaScript

Efficient method for transferring element text to title attribute using AngularJS

Deciding Between Promises and Callbacks in Node.js

Utilizing external objects within the data() function of Vue: A comprehensive guide

Encountered an issue with trying to access the 'map' property of an undefined value while using Express and VueJS

Error: Attempting to access index '0' of an undefined JSON object in a ReactJS application

JQuery datepicker is functioning properly only after an alert when loaded with AJAX