[Vuejs]-Sequential rendering of elements in vue

by

1👍

Change so that your label tag wraps the input, and remove the second v-for from input tag is.

Notice where </label> tag is located:


    <div class="center">
      <div class="stars">
        <label
          v-for="star in stars"
          :key="star.value"
          :for="star.id"
          :class="star.value % 1 === 0 ? 'full' : 'half'"
        >
          <input
            type="radio"
            :key="star.value"
            :id="star.id"
            :name="'rating'"
            :value="star.value"
          />
        </label>
      </div>
    </div>
👤Russ Deneychuk

0👍

How can you manage ratings with a radio inputs. I have created a simple implementation keeping in mind your scenario.

<script setup>
import { ref } from 'vue'

const stars = ref([
    { id: "star5", value: 5 },
    { id: "star4.5", value: 4.5 },
    { id: "star4", value: 4 },
    { id: "star3.5", value: 3.5 },
    { id: "star3", value: 3 },
    { id: "star2.5", value: 2.5 },
    { id: "star2", value: 2 },
    { id: "star1.5", value: 1.5 },
    { id: "star1", value: 1 },
    { id: "star0.5", value: 0.5 },
  ]);
</script>

<template>
  <div class="center">
    <fieldset class="rating">
      <div v-for="star in stars" :key="star.id">
        <input type="range" :id="star.id" :min="0" max="5" :name="'rating'" v-model="star.value" step=".5" />
        <label :for="star.id" :class="star.value % 1 === 0 ? 'full' : 'half'">
        {{star.value % 1 === 0 ? 'full' : 'half'}} - {{star.value}}
        </label>
      </div>
    </fieldset>
  </div>
</template>

Demo

Hope this helps

👤Kiran Parajuli

Leave a comment