VueJs: Multiple components on one view with different value-CodePudding

I am a beginner in VueJs. I want to show the same component multiple times on one view. So I added this code:

<StarRatingReadonly :rating="i" v-for="i in 5" :key="i"></StarRatingReadonly>

My StarRating-Script component looks like this:

CodePudding user response：

As you added :checked="ratingValue == 1", It will always checked the radio input which verify this condition.

As I don't have your full child template code. Right now it is just showing simple radio inputs.

Demo :

Vue.component('StarRatingReadonly', {
  props: ['rating'],
  template: `<input
    type="radio"
    id="rating1"
    name="rating"
    :checked="rating === 1"
  >`
});

var app = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <star-rating-readonly v-for="i in 5" :key="i" :rating="i"></star-rating-readonly>
</div>

Can you please check above code snippet and complete the remaining code you have. So that I can look into the requirement/issue you are facing.

CodePudding user response：

The reason is simple: radio inputs are meant to chose a single value among multiple choices. It means that within a fieldset, only on radio can be checked at the time.

It's clearer if you remove your .rate > input { display: none; }, you'll see you have only one radio checked.

Solution

Just use checkbox instead of radio. They do the same except that multiple checkboxes can be selected at the same time.

Also, you should update your :checked="" conditions so that it's checked if the rating is actually greater than or equal to the input value:

<fieldset >
  <input
    type="checkbox"
    name="rating"
    :checked="rating >= 5"
  ><label for="rating10" title="5 stars"></label>
  <input
    type="checkbox"
    name="rating"
    value="4.5"
    :checked="rating >= 4.5"
  ><label  for="rating9" title="4 1/2 stars"></label>
  <input
    type="checkbox"
    name="rating"
    value="4"
    :checked="rating >= 4"
  ><label for="rating8" title="4 stars"></label>
  <input
    type="checkbox"
    name="rating"
    value="3.5"
    :checked="rating >= 3.5"
  ><label  for="rating7" title="3 1/2 stars"></label>
  <input
    type="checkbox"
    name="rating"
    value="3"
    :checked="rating >= 3"
  ><label for="rating5" title="3 stars"></label>
  <input
    type="checkbox"
    name="rating"
    value="2.5"
    :checked="rating >= 2.5"
  ><label  for="rating4" title="2 1/2 stars"></label>
  <input
    type="checkbox"
    name="rating"
    :checked="rating >= 2"
  ><label for="rating3" title="2 stars"></label>
  <input
    type="checkbox"
    name="rating"
    :checked="rating >= 1.5"
  ><label  for="rating2" title="1 1/2 star"></label>
  <input
    type="checkbox"
    name="rating"
    :checked="rating >= 1"
  ><label for="rating1" title="1 star"></label>
</fieldset>

Working fork of your jsfiddle: https://jsfiddle.net/Kapcash/vzwpc5br/

Note: you could use a v-for inside your rating component to render your inputs and simplify the template.