Why is the set method being executed twice? Check the console when you click the star.
Removing @click="set(rating)" results in no action, indicating it is not called elsewhere.
HTML
<div id="star-app" v-cloak>
<star-rating value="0"></star-rating>
</div>
<template id="template-star-rating">
<div class="star-rating">
<label
class="star-rating__star"
v-for="rating in ratings"
:class="{'is-selected': ((value >= rating) && value != null), 'is-disabled': disabled}"
@mouseover="star_over(rating)"
@mouseout="star_out"
@click="set(rating)">
<input
class="star-rating star-rating__checkbox"
type="radio"
:name="name"
:disabled="disabled"
:id="id"
:required="required"
v-model="value">
★
</label>
</div>
</template>
JS
'use strict';
Vue.component('star-rating', {
template: '#template-star-rating',
data: function data() {
return {
value: null,
temp_value: null,
ratings: [1, 2, 3, 4, 5]
};
},
props: {
'name': String,
'value': null,
'id': String,
'disabled': Boolean,
'required': Boolean
},
methods: {
star_over: function star_over(index) {
if (this.disabled) {
return;
}
this.temp_value = this.value;
this.value = index;
},
star_out: function star_out() {
if (this.disabled) {
return;
}
this.value = this.temp_value;
},
set: function set(value) {
if (this.disabled) {
return;
}
// This runs twice
console.log(value);
this.temp_value = value;
this.value = value;
}
}
});
new Vue({
el: '#star-app'
});
This code is a modified version based on an older version by someone else. You can also find a similar example that doubles here.