gistfile1.txt

              //index
              <div class="form-group mb-2">
								<span v-for="(question, index) in questions.questions">
										<p><li>{{ question.en }}</li></p>
										<div class="rating">
											  <input type="radio" :id="'star-' + index + '-5'" v-model="question.value" :value="5" />
											  <label class="star" :for="'star-' + index + '-5'" title="Awesome" aria-hidden="true"></label>
											  <input type="radio" :id="'star-' + index + '-4'" v-model="question.value" :value="4" />
											  <label class="star" :for="'star-' + index + '-4'" title="Great" aria-hidden="true"></label>
											  <input type="radio" :id="'star-' + index + '-3'" v-model="question.value" :value="3" />
											  <label class="star" :for="'star-' + index + '-3'" title="Very good" aria-hidden="true"></label>
											  <input type="radio" :id="'star-' + index + '-2'" v-model="question.value" :value="2" />
											  <label class="star" :for="'star-' + index + '-2'" title="Good" aria-hidden="true"></label>
											  <input type="radio" :id="'star-' + index + '-1'" v-model="question.value" :value="1" />
											  <label class="star" :for="'star-' + index + '-1'" title="Bad" aria-hidden="true"></label>
										</div>
										<small v-if="$v.questions.questions.$each[index].value.$error" class="mb-2 text-danger"><i class="mdi mdi-close-circle"></i> This rating is required.</small>
									</span>
							</div>
              
              
              // css
              
              .rating {
  	            border: none;
                display:flex;
                flex-direction:row-reverse;
                justify-content:center;
              }
              .rating > label {
                  color: #90A0A3;
              }
              .rating > label:before {
                  margin: 4px;
                  font-size: 3em;
                  font-family: "Font Awesome 5 Free";
                  content: "\f005";
                  display: inline-block;
              }
              .rating > input {
                    display: none;
              }
              .rating > input:checked ~ label,
              .rating:not(:checked) > label:hover,
              .rating:not(:checked) > label:hover ~ label {
                color: #F79426;
              }
              .rating > input:checked + label:hover,
              .rating > input:checked ~ label:hover,
              .rating > label:hover ~ input:checked ~ label,
              .rating > input:checked ~ label:hover ~ label {
                color: #FECE31;
              }