Rating Component using BEM, grid, flexbox and Vue.js

Community feedback

• 

  Ivan•2,610

  @isprutfromuaPosted almost 3 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  your solution looks great, however, if you want to improve it, you can follow these steps:

  ✅ Please use v-for here

  <label class="rating" :class="{ 'rating--active': rating == 1 }">
  	<input type="radio" name="rating"
    v-model="rating" value="1" required>
    	<span>1</span>
  </label>
  <label class="rating" :class="{ 'rating--active': rating == 2 }"><input type="radio" name="rating"
    v-model="rating" value="2" required><span>2</span></label>
  <label class="rating" :class="{ 'rating--active': rating == 3 }"><input type="radio" name="rating"
    v-model="rating" value="3" required><span>3</span></label>
  <label class="rating" :class="{ 'rating--active': rating == 4 }"><input type="radio" name="rating"
    v-model="rating" value="4" required><span>4</span></label>
  <label class="rating" :class="{ 'rating--active': rating == 5 }"><input type="radio" name="rating"
    v-model="rating" value="5" required><span>5</span></label>
  
  

  ✅ please set class instead of tag styling

  .rating input {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
  }
  

  I hope my feedback will be helpful. You can mark it and my other comments as useful if so 👍 it is not difficult for you, but I understand that my efforts have been appreciated

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  0

  ---

  

  Marcus•10

  @MangoMarcusPosted almost 3 years ago

  @isprutfromua good points, much appreciated!

  0

  

  Ivan•2,610

  @isprutfromuaPosted almost 3 years ago

  @MangoMarcus cheers

  0