[Vue.js] Rating Component

Rating.vue

<template>
    <div class="rating-wrapper">
    	<div class="rating">
    		<button v-for="n in 5" 
    			type="button" 
    			class="rating-element" 
    			:disabled="read_only" 
    			:class="[rating >= n ? '' : '--outlined']" 
    			@click="setRating(n)">
    		</button>
    	</div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				rating: 0,
				read_only: false
			}
		},

		mounted() {
			this.rating = this.rate;
			if (this.rate !== -1) {
				this.read_only = true;
			}
		},

		props: {
			rate: { type: Number, required: false, default: -1 },
			icon_outline: { type: String, required: true },
			icon_filled: { type: String, required: true },
			icon_size: { type: String, required: false, default: '30px' }
		},

		methods: {
			setRating(value) { 
				this.rating = (this.rating === 1 && value === 1) ? 0 : value;
				this.$emit('change', this.rating);
			}
		}
	}
</script>

<style scoped lang="sass">

	/** Variables */
	$icon-size: 30px;
	$icon-filled: '/path/to/your/icon';
	$icon-outlined: '/path/to/your/icon';
	


	.rating-wrapper {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    flex: 1;
	}

	.rating {
		width: 100%;
		height: 100%;
		
		&-element {
			position: relative;
			display: inline-flex;
			height: $icon-size;
			width: $icon-size;
			margin-right: 8px;
			
			&:before {
				content: '';
				position: absolute;
				width: $icon-size;
				height: $icon-size;
				top: 0;
				left: 0;
				background-image: url($icon-filled);
				background-repeat: no-repeat;
				background-size: $icon-size;
				
				transition: all .25s;
			}

			&.--outlined:before { background-image: url($icon-outlined); }
		}
	}
</style>