Need dynamic stepping or distinction between display increment and usage increment

[franktopel]

Most of today's real life implementations of rating stars are used for double purpose:

1. Display the current average rating of an item;
2. Interact with this display to give your own rating.

This leads to a big problem:

The average rating obviously will rarely be 3 or 4, but rather a floating point number like 3.71 or 4.29. This needs to be displayed properly. For this to display properly it is currently necessary to set an increment of 0.01.

The user that wants to use the stars to give their own rating usually is supposed to choose between giving either 1, 2, 3, 4 or 5 stars. (this explicitly also means you cannot rate lower than 1). This currently requires to set increment to 1.

This could be solved by either allowing for a dynamic re-evaluation in case the increment value changes, or, even better, differentiating between a config parameter which serves for display purposes only, and another for entry purposes.

[craigh411]

Thanks for this. We had a similar discussion on the vue-rate-it component, for which I suggested a work around by adding some event listeners (see: craigh411/vue-rate-it#6), although I appreciate that that solution is not exactly convenient.

In that same issue I suggested maybe adding a start-value prop that would set the initial value regardless of the increment. Would that work for your use case? If so, I'll see if I can get that added within the next week or so.

[franktopel]

That would work if the visual representation properly displayed that initial float-value properly. Thanks for the quick reply!

Actually I did try to apply a similar workaround like that other vue-rate-it user:
methods: setRatingIncrement(step) { this.ratingIncrement = step; },
And then make this switch of increment happen on mouseenter and leave:

<star-rating :increment="ratingIncrement" @mouseenter="setRatingIncrement(1)" @mouseleave="setRatingIncrement(0.01)" />

Also tried mouseover/out, but the events don't seem to trigger at all.

[craigh411]

@franktopel they won't trigger if you place them directly on the component, you will need to wrap them in a separate div and add the event listeners on that instead:

<div @mouseenter="setRatingIncrement(1)" @mouseleave="setRatingIncrement(0.01)">
    <star-rating v-model="rating" :increment="increment"></star-rating>
</div>

You will then need to force Vue to refresh the DOM, by resetting the bound rating value:

methods: {
  setRatingIncrement(increment) {
    this.increment = increment

    let currentRating = this.rating
    this.rating = 0;
    this.$nextTick(() => {
      this.rating = currentRating;
    });
  }
}

Here's the JSFIddle to show you that in action: https://jsfiddle.net/2rwpo0mb/

As I say, that's not very convenient, so I will try to get this implemented into the component at some point this week.

[franktopel]

Thanks alot for your quick and detailed response! I'm gonna go with the workaround for the time being. Remember to implement this in a way that won't break existing implementations!

[craigh411]

Implemented in Version 1.5.0