CODEWITHSUNDEEP
vue.jsvue-component
Presi
Presi

Reputation: 827

VueJs: Multiple components on one view with different value

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: https://jsfiddle.net/s3dbfhr9/2/

There should always be 5 stars. And depending on the rating it should contains as many green stars. Example: If rating is three, there has to be three green stars and two grey ones. But the value is just showed once.

enter image description here

Upvotes: 0

Views: 442

Answers (2)

Kapcash
Kapcash

Reputation: 6909

The reason is simple: radio inputs are meant to chose a single value among multiple choices. It means that within a fieldset, only one 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 class="rate">
  <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 class="half" 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 class="half" 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 class="half" 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 class="half" 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.

Upvotes: 1

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27202

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.

Upvotes: 1

Related Questions