[Vuejs]-The component does not work correctly if there is more than 1 of it

1👍

You must have unique name attributes, you could achieve it like this:

Script:

import { ref } from 'vue';

const uniqueId = ref(Date.now() + Math.random().toString(36).substr(2, 9));

Template:

<input
  :id="star.id"
  v-model="roundedRating"
  :disabled="props.ratingValue !== undefined"
  type="radio"
  :name="`rating-${uniqueId}`"
  :value="star.value"
  @input="onRatingChange(star.value)"
/>

Leave a comment