Remove rating? about vue-star-rating HOT 3 CLOSED

The main issue with removing the rating by clicking part of the star is that increments are customizable, so this wouldn't work across the board (for example what part of the star would reset it when increments are 0.01?). It is however, pretty straightforward to create your own reset button:

Markup

<div id="app">
  <star-rating v-model="rating"></star-rating>
  <br />
  <a href="#" @click.prevent="rating = 0">Reset</a>
</div>

Vue Instance

Vue.component('star-rating', VueStarRating.default)

new Vue({
  el: "#app",
  data() {
    return{
      rating: 2
   }
  }
})

Here's the JSFiddle

Let me know if you have any other ideas for resetting the stars, I will be happy to consider them.

from vue-star-rating.

It will do the trick! thanks @craigh411

from vue-star-rating.

I simply add some whitespace to the left of the component like so:
<div class="float-left cursor-pointer" style="width:10px; height:40px;" v-on:click.prevent="rating=0"></div><star-rating value="rating" v-model="rating" :star-size="40" :increment="0.5"></star-rating>

This looks nicer than having a "reset" button.

from vue-star-rating.