[Vue warn]: Invalid prop: type check failed for prop "rating". Expected Number with value 3, got String with value "3"

Hi all, I’m getting this error when I get star-rating value from database that’s a json encoded response:

[Vue warn]: Invalid prop: type check failed for prop "rating". Expected Number with value 3, got String with value "3".

html

<div v-for="(item, index) in hosters" v-bind:key="item.id" class="col-md-6 mb-50">
     <div class="rate-area">
        <star-rating @rating-selected="setRating(item.id, item.rating)"
             v-model="item.rating"></star-rating>
     </div>
     ....

Vue:

Vue.component('star-rating', VueStarRating.default);

let app = new Vue({
    el: '#app',
    data: {
        city: city,
        hosters: {},
    },created: function () {
        this.searchHoster()
   },methods: {
      searchHoster: function () {
        axios.post('http://localhost/search/searchHoster.php', { "city": this.city }).then((response) => {
            console.log(response.data)
            if (response.data != "No hoster found") {
                this.hosters = response.data.hosters;
                console.log(this.hosters);
                ...
            } else {
                console.log(response.data);
            }

        }).catch((error) => {
            console.log(error);
        });
    },

   ....

I’ve tried to set rating type Number but it didn’t work.

Am also getting invalid Prop type warnings.

I pass in a Number and it errors saying it expects a String. If I change the type to String, it complains that it expects a Number.

I gave up :stuck_out_tongue_winking_eye:

2 Likes

I’m also getting these alternating errors when sending an Object or Array.

Seems odd to have to use:

timesArray: {
    type: [Array, Object],
    required: true,
  }

to not have an error thrown… (also possible that I’m missing something obvious again :neutral_face:)

@ZermattChris I would create a loop over this.hosters in your axios response and parse the rating values with parseInt(item, 10).