Twitter Bootstrap Question posted in

v-for cannot read prop data-Twitter bootstrap

<template>
    <span>
        <i class="fa fa-star text-warning fa-2x" v-for="r in rating" :key="r"></i>
        <h1>{{rating}}</h1>
    </span>    
</template>


<script>
export default {
    name: "ratings",
    props: ["rating"],
}
</script>

<style>

</style>

This is one of my child component where 4 is passing as prop and when I try to display rating prop in the H1 tag it is showing 4, but I don’t know why i tag is not iterating 4 times

If you want to replicate the same situation then copy paste the above code and in the index.html in the public folder just add these two cdn below

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

And in the App.vue,

<div>
    <ratings rating="4"></ratings>
</div>

also don’t forget to import and register this component in the script tag in App.vue

So can anybody help me in this

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I solve this problem via

    <ratings :rating="parseInt(4)"></ratings>

  2. 0

    Pass the value as an integer by adding binding sign : to the passed prop, because it’s a string, and has only one length, that’s why it’s not iterating.

    <div>
    <ratings :rating="4"></ratings>
</div>

    If the value is coming from server or other place, convert the value into loop, like this:

     <i class="fa fa-star text-warning fa-2x" v-for="r in parseInt(rating)" :key="r"></i>
    Login or Signup to reply.
  3. 0 
    v-for="r in parseInt(rating)"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search